6

我有一个通过 ajax 流式传输数据的 angularjs 应用程序，我想对数据进行 ng-repeat。我有数据流和显示，但现在我想模板化对象。我遇到的问题是我使用 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>
4

2 回答 2

1

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

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]
	}
});
.span3 {
	display:inline-block;
	padding:5px;
	margin:5px;
	background: pink;
}
<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>

基本上，可以在表达式内部动态创建诸如“$model”之类的变量：

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

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

于 2017-05-26T21:27:57.800 回答
0

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

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

那就是用更简单的 angularjs 代码输出你正在做的事情。

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

于 2013-04-05T16:52:57.160 回答