Question

如何在角度js中使用带有ng-repeat的选框？

我试过

<marquee>
        <span ng-repeat="item in allItems">
          <img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
          </span> 
</marquee>

但它似乎无法运作

另外，请提供一些以Angular Way设计的滑动新闻自动收报机。

Answer 1

您忘记了{{ }}标记

<marquee>
      <span ng-repeat="item in allItems">
          <img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
      </span> 
</marquee>

编辑：，因为您已编辑了问题以包含解决方案

在HTML5中不推荐使用marquee，您应该使用CSS解决方案或角度解决方案这是一个带有字幕功能的simple fiddle和a ticker

Answer 2

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>

https://jsfiddle.net/rod3qo7x/3/

Answer 3

你也可以尝试这个

 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>

Angular JS：Marquee中的ng-repeat

3 个答案:

jsfiddle上有一个工作示例。