Question

我有一个angularjs应用程序通过ajax流式传输数据，我想重复数据。我有数据流和显示但现在我想模板化对象。我遇到的问题是我使用ng-repeat简单地索引到控制器中的数组。我现在需要一个

    <div class="row" data-ng-repeat="row in rows">
        <div class="span3" data-ng-repeat="col in cols">
            //displays the raw json fine
            {{ data[$parent.$index * numColumns + $index] }}                           
            // also displays the raw json
            {{ item = data[$parent.$index * numColumns + $index] }}                           
            <div>Id: {{item.Id}} </div>
            <div>Title: {{ item.ClientJobTitle }}</div>
            ...
        </div>
    </div>

我总是可以为每个属性重复数组索引表达式，但是会有几十个属性，所以代码会很难看，所有重复的计算都会减慢速度。

这样做的正确（有角度）方法是什么？

更新我需要它才能响应，我将根据窗口宽度动态调整列数。

更新我想我真正想要的是类似下面的非工作示例

     <div class="row" data-ng-repeat="row in rows">
        <div class="span3" data-ng-repeat="col in cols">
            <div ng-model="data[$parent.$index * numColumns + $index]">
                <!-- Here $model would refer to the ng-model above -->
                <div>Id: {{$model.Id}} </div>
                <div>Title: {{ $model.Title }}</div>
                ...
            </div>
        </div>
    </div>

Answer 1

您可能已经在某种程度上处理了这个问题，但值得一提的是，即使没有指令，您的非工作示例也是绝对可能的：

＆＃13;

var app = angular.module('app',[])
app.controller('myCtrl', function($scope) {
	$scope.numColumns = 2
	$scope.rows = [1,2,3]
	$scope.cols = [1,2]
	$scope.data = [
		{Id:'abc',Title:'cde'},
		{Id:'qwe',Title:'rty'},
		{Id:'asd',Title:'fgh'},
		{Id:'foo',Title:'bar'},
		{Id:'uni',Title:'corn'},
		{Id:'mag',Title:'ic'},
	];
	$scope.change1 = function(){
			$scope.numColumns = 2
		$scope.rows = [1,2,3]
		$scope.cols = [1,2]
	}
		$scope.change2 = function(){
			$scope.numColumns = 3
		$scope.rows = [1,2]
		$scope.cols = [1,2,3]
	}
});

＆＃13;

.span3 {
	display:inline-block;
	padding:5px;
	margin:5px;
	background: pink;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<body ng-app="app">
	<div ng-controller="myCtrl">
		<button ng-click="change1()">2x3</button>
				<button ng-click="change2()">3x2</button>

	<div class="row" data-ng-repeat="row in rows">
        <div class="span3" data-ng-repeat="col in cols">
            <div>
							{{($model = data[$parent.$index * numColumns + $index])?'':''}}

                <!-- Here $model would refer to the ng-model above -->
                <div>Id: {{$model.Id}} </div>
                <div>Title: {{ $model.Title }}</div>
                ...
            </div>
        </div>
    </div>
	</div>
</body>

＆＃13;

基本上，可以创建这样的变量作为＆＃34; $ model＆＃34;在飞行中，内部表达：

{{($model = data[$parent.$index * numColumns + $index])?'':''}}

它不会被打印出来，它会响应，在ng-repeat和all中工作。不过，这是一种解决方法，指令可能是更好的选择。

Answer 2

我认为这样做的方法是简单地遍历项目本身，并抛弃所有numRows和numColumns。

http://plnkr.co/edit/Qu6X5FnZY3TpgyNjnBXy?p=preview

这正是输出你正在做的事情，很多更简单的angularjs代码。

您似乎正在使用行/列计数来限制水平显示在行上的项目数。我认为你可以使用纯css处理这个问题，你可以在我的插件中看到我限制了父容器的宽度。我是手动完成的，但您可以轻松地将动态css类附加到父容器，并可以更灵活地控制行中显示的项目数。

ng-repeat索引到数组

2 个答案: