私はこれを理解していませんが、何か間違っているか、angularjs 以外の方法でやっていると思われます。
ng-repeat 内にチェックボックス リストがあります。このコントローラーは JSON からリストをロードします。本当に簡単です。次に、結果の各チェックボックスでディレクティブ (car-select) を使用しています。このディレクティブは、メインの $scope (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;
}
指令:
app.directive('carSelect', function() {
return function(scope, element) {
element.bind('change', function() {
scope.selectBrand();
})
}
});
ここが私が理解できない奇妙な部分です。この特定の行がこのすべてを機能させていることを理解するのにしばらく時間がかかりました. ページに次を追加すると、すべてがうまく機能します。しかし、それを取り除くと、すべてが壊れます。どうして？！
<div>{{selectBrand()}}</div>
上記がHTMLで呼び出されない限り、全体がバインドされないようです。ディレクティブで呼び出され、その呼び出しを clickButton() 関数内に入れようとしましたが、最終的には壊れます。いずれにせよ、上記を削除すると、テキストボックスのライブ更新は失敗するようです。どのように私が何か間違ったことをしているのか、どうすればそれを修正できるのかについての良い説明を得たいと思います:)