复选框列表中断，为什么？和最佳的Angularjs方式？

我不明白这一点，但我怀疑我做错了什么，或者是非角度的方式。复选框列表中断，为什么？和最佳的Angularjs方式？

我有一个复选框列表内ng-repeat。它控制器从JSON加载列表。非常简单。然后，我在每个结果复选框上使用指令（汽车选择）。该指令调用主$范围内的函数（selectBrand（））。这将遍历所选的复选框，如果checked == true，则添加到$ scope.brand。我添加了一个文本框，使得$ scope.brand填充它，我已经将其设置为必需的，以便它触发内置的验证例如：

HTML：

<div ng-repeat="v in viewModel"> 
    <label class="checkbox"> 
    <input type="checkbox" ng-model="v.c" ng-checked="v.c" />{{v.n}} 
    </label> 
</div> 
<input type="text" name="brands" ng-model="brands" car-select required/> <br>

JS ：

$scope.selectBrand = function() { 
    var selectedBrands = []; 
    angular.forEach($scope.viewModel, function(v){ 
     if (v.c) 
     selectedBrands.push(v.v); 
    }) 
    if (selectedBrands.length > 0) 
     $scope.brands = selectedBrands; 
    else 
     $scope.brands = null; 
    }

DIRECTIVE：

app.directive('carSelect', function() { 
    return function(scope, element) { 
    element.bind('change', function() { 
     scope.selectBrand(); 
    }) 
    } 
});

这是我不明白的怪异部分。花了一段时间才弄清楚这个特定的路线正在使整个事情发挥作用。如果我在页面中添加以下内容，则一切正常。但是，如果我删除它，整个事情就会破裂。为什么？！

<div>{{selectBrand()}}</div>

这就像整个事情没有绑定，除非上述内容在HTML中被调用。它在指令中被调用，并且我尝试将该调用放入clickButton（）函数中，但最终它会中断。无论哪种方式，如果删除上述内容，则文本框的实时更新似乎失败。我很想得到的我怎么做错事了很好的解释，以及如何我可以修复:)

PLUNKER： http://plnkr.co/edit/4QISKcq7YYH678YLsTTF?p=preview

来源

2013-05-06 jzm

你可以通过你的公共活跃者，要做更新。 – timactive 2013-05-06 08:01:17

如果您不是作者，更新它的典型方法是“分叉”它。然后将新的URL链接回您的更新版本的plunk。 – jzm 2013-05-06 08:03:40

这对你没问题？ – timactive 2013-05-06 10:40:32

好吧，我创建叉;-)

只有数据

更新变量检查

模型：

{"cars": 
    [ 
    {"v":"m","n":"Mini","c":false}, 
    {"v":"c","n":"Corvette","c":true}, 
    {"v":"b","n":"BMW","c":true}, 
    {"v":"l","n":"Lamborghini","c":true}, 
    {"v":"f","n":"Ferrari","c":false} 
    ] 
}

只希望检查：

$scope.brands = $filter('filter')($scope.viewModel, {c: true});

当你想更新变量控制器，以便使用手表的型号变化

$scope.$watch('viewModel', function(newval, oldval){ 
         if (oldval != newval) 
         { 
         $scope.brands = $filter('filter')($scope.viewModel, {c: true}); 
          } 
          },true 
         ); 
    });

看到http://plnkr.co/edit/PnABre?p=preview

来源

2013-05-06 08:57:55 timactive

感谢您的回复。有趣的是，我认为$手表通常是不好的做法。但我想在HTML中的功能几乎就像一个$手表，因为它不断被解雇。无论如何，使用上述技术，这是一个更加精美的玩意儿。 HTTP：// plnkr。co/edit/hLD9zA？p =预览 – jzm 2013-05-06 14:02:42

$仅当您更改scope.model时才会触发。您可以在watch函数中添加一个断点来分析comportment。 – timactive 2013-05-06 14:16:11

我一个正确的验证更新普拉克，http://plnkr.co/edit/PnABre?p=preview – timactive 2013-05-06 14:36:37

复选框列表中断，为什么？和最佳的Angularjs方式？

回答

相关问题