1

我不明白这一点，但我怀疑我做错了什么，或者是非 angularjs 方式。

我在 ng-repeat 中有一个复选框列表。它控制器从 JSON 加载列表。真的很简单。然后，我在每个生成的复选框上使用指令（汽车选择）。该指令在主 $scope (selectBrand()) 中调用一个函数。这会循环选中复选框，如果选中==true，则添加到 $scope.brand。我添加了一个文本框，以便 $scope.brand 填充它，并将其设置为 required 以便它触发内置验证，例如：

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;
  }

指令：

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

4

1 回答 1

2

好的，我创建了 fork ;-)

仅检查数据的更新变量

你的模型：

{"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});

当模型改变时你想更新你的变量所以在控制器中使用 watch

$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-06T08:57:55.930 回答