Angularjs, wie bedingt überprüfen einer checkbox basiert auf der Existenz von repeat-element in einer anderen Liste

als eine sehr neue angularjs Benutzer mit einer cshtml-Seite, während das laden der Seite von einem modalen Fenster, ich versuche zu prüfen, ein wiederholen Kontrollkästchen wenn er vorhanden ist in einer anderen Liste. der code unten ist eine konzeptuelle:

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

speziell, wenn analysisType gefunden im Projekt.analysisTypes array, ich möchte das Kontrollkästchen. Ich bin fast sicher, dass es möglich ist, aber kann nicht herausfinden, wie.

analysisTypes und Projekt existieren beide auf den $scope, so dass die Daten zur Verfügung stellen.

oder vielleicht ist die Lösung zu binden, die Checkboxen direkt zu Projekt.analysisTypes, aber ich muss immer noch in der Lage sein, dynamisch Rendern der domain Checkboxen

InformationsquelleAutor user3681971 | 2014-08-14

  1. 3

    'indexOf' kann nicht verwendet werden, um zu finden, die erste übereinstimmende Objekt von einem array in dieser Art und Weise(einfache demo). Man sollte es durch die Suche auf spezifische und eindeutige Attribut des Objekts, z.B., id.

    Hier ist mein Beispiel:

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

    Hier ist die jsFiddle DEMO.

    Bitte beachten Sie: Array.der Prototyp.Karte und Array.der Prototyp.indexOf kann nur im IE9+. Sie müssen hinzufügen einige polyfill, wenn Sie browser mit Unterstützung von Anliegen.

    vielen Dank - das war es.

    InformationsquelleAutor Chickenrice

  2. 4

    könnten Sie die ng-Richtlinie überprüft, um überprüfen Sie Ihre Eingabe, wenn die Bedingung true zurück, oder einfach nur binden Sie Ihre Eingabe mit einem ng-Modell.

    versuchen Sie so etwas wie, dass

    <input type="checkbox" ng-checked="project.analysisTypes.indexOf(analysisType) != -1" />

    InformationsquelleAutor Polochon

Schreibe einen Kommentar