Jako bardzo nowy użytkownik AngularJs z stroną CSHTML, podczas obciążenia strony okna modalnego, próbuję sprawdzić powtarzające się pole wyboru, jeśli istnieje na innej liście. Poniższy kod jest konceptualny:
<li data-ng-repeat="analysisType in analysisTypes|limitTo:12 | limitTo: -6">
<input type="checkbox" ng-class="{'checked' : project.analysisTypes.indexOf(analysisType) != -1}" />
{{analysisType.name}}
</li>
W szczególności, jeśli analizistype jest znaleziony w tablicy projektu.analizystypes, chciałbym wybrać pole wyboru. Jestem prawie pewny, że jest to możliwe, ale nie mogę dowiedzieć się, jak.
Analizystypy i projekt istnieją zarówno na $ Zakres, dzięki czemu dane są dostępne.
A może rozwiązanie jest powiązanie pola wyboru bezpośrednio do projektu.analizystypy, ale nadal muszę być w stanie dynamicznie renderować pole wyboru
2 odpowiedzi
"Indexof" nie można użyć do znalezienia pierwszego dopasowanego obiektu tablicy w ten sposób (Proste Demo) . Powinieneś go znaleźć, szukając konkretnego i unikalnego atrybutu obiektu, np. Identyfikator.
Oto mój przykład:
HTML
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="analysisType in analysisTypes">
<input type="checkbox" ng-class="{'checked':isExist(analysisType.id)!=-1}" ng-checked="isExist(analysisType.id)!=-1"/>
{{analysisType.name}}
</li>
</ul>
</div>
JS
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.analysisTypes = [{id:1,name:"typeA"},{id:2,name:"typeB"},{id:3,name:"typeC"}];
$scope.project = {analysisTypes:[{id:2,name:"typeB"}]};
$scope.isExist = function(id){
return $scope.project.analysisTypes.map(function(type){return type.id;}).indexOf(id);
}
});
Oto JSFiddle Demo.
Uwaga: array.prototype.map i array.prototype.indexof tylko w IE9 +. Musisz dodać pewne posiłek, jeśli masz obawy dotyczące przeglądarki.
Możesz użyć dyrektywy NG, aby sprawdzić dane wejściowe, gdy warunek powróci true lub po prostu wiązać wejście za pomocą modelu NG.
Spróbuj czegoś takiego
<input type="checkbox" ng-checked="project.analysisTypes.indexOf(analysisType) != -1" />