如何避免ng-init的角度？
[英]How to avoid ng-init in angular?
问题描述
I want to show message when ng-repeat collection is empty ie: 
当ng-repeat集合为空时，我想显示消息，即：
<div ng-init="filteredArray=(array|filter:{...})">
<h1 ng-if="!filteredArray.length">Empty array</h1>
<table ng-if="filteredArray.length">
<tr ng-repeat="element in filteredArray">
<td>{{element}}</td>
</tr>
</table>
</div>
The problem is that ng-init will not watch for modification of the source array. 问题在于ng-init不会监视源数组的修改。 Any hint how to do it properly? 有任何提示如何正确执行吗？
3 个解决方案
解决方案1
1 2016-07-08 10:38:19
Check ng-repeats $last to show your message like below 检查ng-repeats $ last以显示如下消息
<div ng-repeat="n in data track by $index">
<h1 ng-if="$last">Empty array</h1>
</div>
In your case you can have a variable at the table level and then set it to $last,when it'll be true your message will show like below 在您的情况下，您可以在表级别具有一个变量，然后将其设置为$ last，这时您的消息将显示如下
<body ng-app="app" ng-controller="ctrl">
<div ng-init='counter=false'>
<h1 ng-if='counter'>Empty array</h1>
<table ng-if="myData.length">
<tbody>
<tr ng-repeat="element in myData track by $index" ng-init="counter=$last">
<td>{{element}}
<ng-if ng-init='sync($last)'/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Your controller should look like below 您的控制器应如下所示
var app=angular.module('app',[])
app.controller('ctrl',function($scope){
$scope.myData=['a','b','c']
$scope.sync=function(val)
{
alert(val)
$scope.counter=val
}
})
解决方案2
1 已采纳 2016-07-08 10:48:39
You can just create the filtered variable in the ng-repeat , and use that one: 您可以在ng-repeat创建过滤后的变量，然后使用该变量：
<div>
<h1 ng-if="!filteredArray.length">Empty array</h1>
<table ng-if="filteredArray.length">
<!-- here angular assigns the filtered array to the 'filteredArray' variable,
which then can be used -->
<tr ng-repeat="element in filteredArray=(array|filter:{...})">
<td>{{element}}</td>
</tr>
</table>
</div>
See also this jsfiddle 另请参阅此jsfiddle
EDIT 编辑
If you don't like the ugly expression, you can also do something like this: 如果您不喜欢丑陋的表情，还可以执行以下操作：
function myController ($scope, $filter) {
$scope.$watch("theFilter", function (val) {
$scope.filteredArray = $filter("filter")($scope.array, val);
});
}
And in your html: 并在您的html中：
<tr ng-repeat="element in filteredArray">
..
</tr>
Check in this jsfiddle 签入这个jsfiddle
解决方案3
0 2016-07-08 10:47:29
Since you have stored (array|filter:{...}) value into filteredArray , you cannot modify it in the template. 由于您已经将(array|filter:{...})值存储到filteredArray ，因此无法在模板中对其进行修改。
You should repeat (array|filter:{...}) code in the template. 您应该在模板中重复(array|filter:{...})代码。
<h1 ng-if="!(array|filter:{...}).length">Empty array</h1>
<table ng-if="(array|filter:{...}).length">
<tr ng-repeat="element in (array|filter:{...})">
<td>{{element}}</td>
</tr>
</table>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.