how to use marquee with ng-repeat in angular js?
如何在角度js中使用带有ng-repeat的字幕?
I tried
<marquee>
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
</span>
</marquee>
But it doesn't seem to work
但它似乎没有用
Also, please suggest some sliding news ticker designed in Angular Way.
另外,请建议一些以Angular Way设计的滑动新闻自动收报机。
3 个解决方案
#1
you have forgotten the {{ }} marks
你忘记了{{}}标记
<marquee>
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
</span>
</marquee>
EDIT: since you have edited your question to include the solution
编辑:因为您已编辑了您的问题以包含解决方案
marquee is deprecated in HTML5, you should use a CSS solution, or an angular one here is a simple fiddle with marquee functionality, and a ticker
在HTML5中不推荐使用marquee,你应该使用一个CSS解决方案,或者这里的一个有角度的解决方案是一个简单的小提琴功能和一个自动收录器
#2
There is a working example on jsfiddle.
<div ng-app="TestAPP">
<div ng-controller='test'>
<marquee >
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="paddingtop:3px;"/>
{{item.news}}
</span>
</marquee>
</div>
</div>
#3
You can try this also
你也可以尝试一下
angular.module('angular-news-ticker', [])
.controller('newsCtrl', function ($scope, $interval) {
$scope.start=0;
$scope.totalitem=4;
$scope.news=[{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'},{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'}];
$scope.totalnumofitem=$scope.news.length;
$scope.next=function () {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
$scope.prev=function () {
if ($scope.start>0) {
$scope.start -= 1;
$scope.totalitem -=1;
}
}
$interval(moveat, 500);
function moveat() {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="angular-news-ticker">
<head>
<title>demo page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-controller="newsCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<span>news</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul>
<li ng-repeat="new in news.slice(start, totalitem)" >{{new.obj}}</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer">
<ul class="pagination pull-right">
<li><a href="#" class="prev" ng-click="prev()"><span class="glyphicon glyphicon-chevron-down"></span></a></li>
<li><a href="#" class="next" ng-click="next()"><span class="glyphicon glyphicon-chevron-up"></span></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>#1
you have forgotten the {{ }} marks
你忘记了{{}}标记
<marquee>
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
</span>
</marquee>
EDIT: since you have edited your question to include the solution
编辑:因为您已编辑了您的问题以包含解决方案
marquee is deprecated in HTML5, you should use a CSS solution, or an angular one here is a simple fiddle with marquee functionality, and a ticker
在HTML5中不推荐使用marquee,你应该使用一个CSS解决方案,或者这里的一个有角度的解决方案是一个简单的小提琴功能和一个自动收录器
#2
There is a working example on jsfiddle.
<div ng-app="TestAPP">
<div ng-controller='test'>
<marquee >
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="paddingtop:3px;"/>
{{item.news}}
</span>
</marquee>
</div>
</div>
#3
You can try this also
你也可以尝试一下
angular.module('angular-news-ticker', [])
.controller('newsCtrl', function ($scope, $interval) {
$scope.start=0;
$scope.totalitem=4;
$scope.news=[{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'},{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'}];
$scope.totalnumofitem=$scope.news.length;
$scope.next=function () {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
$scope.prev=function () {
if ($scope.start>0) {
$scope.start -= 1;
$scope.totalitem -=1;
}
}
$interval(moveat, 500);
function moveat() {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="angular-news-ticker">
<head>
<title>demo page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-controller="newsCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<span>news</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul>
<li ng-repeat="new in news.slice(start, totalitem)" >{{new.obj}}</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer">
<ul class="pagination pull-right">
<li><a href="#" class="prev" ng-click="prev()"><span class="glyphicon glyphicon-chevron-down"></span></a></li>
<li><a href="#" class="next" ng-click="next()"><span class="glyphicon glyphicon-chevron-up"></span></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>