ng-repeat作用域的奇怪行为
Weird behavior of ng-repeat scope
我有这段HTML:
<div ng-switch="view">
<div ng-switch-when="products">
<input class="form-control" placeholder="Search" ng-model="searchText" />
<ul ng-show="products && products.length > 0">
<li class="head">
<div class="column col-select"><input type="checkbox" ng-model="$parent.allSelected" ng-change="$parent.selectAll($parent.allSelected)" /></div>
<div class="column col-name">Name</div>
<div class="column col-code">Code</div>
<div class="column col-stock">Stock</div>
<div class="column col-code">Price</div>
<div class="column col-buttons"></div>
</li>
<li ng-repeat="p in ($parent.shownProducts = (products | filter: searchText))">
<div class="column col-select"><input type="checkbox" ng-model="p.selected" ng-change="select(p.selected)" /></div>
<div class="column col-name">{{ p.name }}</div>
<div class="column col-code">{{ p.code }}</div>
<div class="column col-stock">{{ p.stock }}</div>
<div class="column col-code">{{ p.price | currency: '$' : 2 }}</div>
<div class="column col-buttons">
<button class="btn btn-edit" ng-click="goTo('edit', $index)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-delete" ng-click="goTo('delete', $index)"><i class="fa fa-trash"></i></button>
</div>
</li>
</ul>
</div>
</div>
在我的Angular控制器中:
$scope.products = [{ name: 'Test1' }, { name: 'Test2' }];
$scope.select = function (value) {
if (!value) {
$scope.allSelected = value;
return;
}
var selCount = 0;
for (var i in $scope.shownProducts) {
if ($scope.shownProducts[i].selected) selCount++;
}
if (selCount == $scope.shownProducts.length) $scope.allSelected = true;
};
$scope.selectAll = function (value) {
for (var i in $scope.shownProducts) {
$scope.shownProducts[i].selected = value;
}
};
这段代码可以工作但是:
- Header (li.head)必须使用$parent scope来访问$scope服务否则,虽然设置了初始值,但模型不会更新正确。
- Ng-repeat作用域不使用$parent,但它工作得很好
在我看来不一致。我知道ng-repeat创建了一个子作用域,但为什么不需要$parent呢?为什么需要$parent,虽然它在ng-repeat定义之外?
更新:
我发布的代码是ng-switch的一部分,所以我也把它放了进去。shownProducts是一个数组,其中包含通过搜索文本过滤的项目。我将该控件添加到HTML中。我还将产品数组添加到$scope.
DEMO - http://plnkr.co/edit/0TpaUYqgaWYlGTdQ2KJN?p=preview
JS :
$scope.select = function (value) {
if (!value) {
$scope.allSelected = value;
return;
}
var selCount = 0;
for (var i in $scope.shownProducts) {
if ($scope.shownProducts[i].selected) selCount++;
}
if (selCount == $scope.shownProducts.length) $scope.allSelected = true;
};
$scope.selectAll = function (value) {
for (var i in $scope.shownProducts) {
$scope.shownProducts[i].selected = value;
}
};
$scope.products = [{"name":1, "code":"001","stock":"abc","price":500},{"name":2, "code":"002","stock":"xyz","price":1000}];
$scope.shownProducts = $scope.products;