2017-03-08 2 views
1

Wie wählen Sie zwei oder mehr Kontrollkästchen basierend auf dem Wert in angularjs?Wie wählen Sie zwei oder mehr Kontrollkästchen basierend auf dem Wert in angularjs aus?

Plunker reference

  • In Plunker gibt es vier checkbox Eingänge mit jeweils einem values ist anders, aber ng-model ist für vier Eingänge gleiche, also wenn ich Moral Ethics Checkbox ist dieser Wert überprüft in api speichern sein müssen.

  • Was ich genau suche ist, wie jetzt, wenn ich eine der Checkbox in Plunker angeklickt alle Kontrollkästchen ist bcoz der gleichen ng-model überprüft. tatsächlich haben wir ng-model als Array in Backend erwähnt, so, wenn eine der zwei Kontrollkästchen klicken, die Werte nur kontrolliert in Backend speichern ...

Beispiel: in Plunker möchte ich Moral Ethics Checkbox anklicken und Social network diese beiden Werte müssen nur überprüft werden und es sollte als Array-JSON-Daten im Backend gespeichert werden.

Diese jsbin link ist genau das, was wir wollen. Wir haben viele Möglichkeiten ausprobiert, konnten aber keine Lösung finden. Also bitte überprüfe und aktualisiere auch meinen Plunker, um die genaue Lösung zu kennen.

function MyCntrl($scope) { 
 
    $scope.questions = [{ 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Religion & Culture", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 

 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Moral Ethics", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Environment & Health", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Environment & Health", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Religion & Culture", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Religion & Culture", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Moral Ethics", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    } 
 
    ] 
 
}
<!doctype html> 
 
<html ng-app> 
 

 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <form ng-controller="MyCntrl"> 
 
    <div class="col-md-3"> 
 
     <label><input type="checkbox" name="Moral Ethics" data-ng-model="category" value="Moral Ethics" ><span>Moral Ethics</span></label></div> 
 

 
    <div class="col-md-3"> 
 
     <label class="green"><input type="checkbox" name="culture" data-ng-model="category" value="culture" ><span>Religion & Culture</span></label></div> 
 

 

 
    <div class="col-md-3"> 
 
     <label class="green"><input type="checkbox" name="Social network" data-ng-model="category" value="Social network" ><span>Social network</span></label></div> 
 

 

 
    <div class="col-md-3"> 
 
     <label class="green"><input type="checkbox" name="Environment logic" data-ng-model="category" value="Environment logic" ><span>Environment logic</span></label></div> 
 
    </form> 
 
</body> 
 

 
</html>

+0

Die Antwort, die Sie zitiert http://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs ist Eine nette Lösung, warum machst du nicht dasselbe? –

+0

@cyril Gandon Ich möchte dies in 'Form' machen, aber sie werden 'ng-repeat =" fruitName in fruits "' verwendet und alles, ich bin ein bisschen verwirrt auf dieser Lösung, also könnt ihr bitte auch meinen Plunker aktualisieren um die lösung bitte zu wissen .... –

+0

Wann hast du api? Gibt es einen Grund, die Checkboxen hart zu codieren? –

Antwort

1

Hier ist der Code-Schnipsel, die wie Sie verhält wollen. Es hält tatsächlich ein separates Array von ausgewählten Elementen und verwaltet es jedes Mal, wenn Sie etwas ein-/ausschalten.

function MyCntrl($scope) { 
 
    $scope.toggleSelection = function toggleSelection(item) { 
 
    var idx = $scope.selection.indexOf(item); 
 

 
    // is currently selected 
 
    if (idx > -1) { 
 
     $scope.selection.splice(idx, 1); 
 
    } 
 
    
 
    // is newly selected 
 
    else { 
 
     $scope.selection.push(item); 
 
    } 
 
    }; 
 

 
    $scope.selection = []; 
 

 
    $scope.items = ["Moral Ethics", "Religion & Culture", "Social network", "Environment logic"]; 
 
    $scope.questions = [{ 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Religion & Culture", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 

 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Moral Ethics", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Environment & Health", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Environment & Health", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Religion & Culture", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Religion & Culture", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    }, 
 
    { 
 
     "_id": "5863d3aaacaeddc00663bc07", 
 
     "user": { 
 
     "_id": "58072aba0f82a61823c434df", 
 
     "displayName": "Table 1", 
 
     "dob": "2016-12-22T18:30:00.000Z", 
 
     "location": "chennai", 
 
     "religion": "hindu", 
 
     "roles": [ 
 
      "admin" 
 
     ], 
 
     "profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
 
     }, 
 

 
     "friend_tag": [], 
 
     "emotion": "Confused", 
 
     "category": "Moral Ethics", 
 
     "content": "mani", 
 
     "title": "Who Is the best Player?", 
 
     "created": "2016-12-28T15:00:58.777Z" 
 
    } 
 
    ] 
 
}
<!doctype html> 
 
<html ng-app> 
 

 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <form ng-controller="MyCntrl"> 
 
    <div class="col-md-3"> 
 
     <label ng-repeat="item in items" style="display: block"> 
 
     <input type="checkbox" name="selectedItems[]" data-ng-model="category" value="{{item}}" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)"><span>{{item}}</span></label> 
 
    </div> 
 
    
 
    <pre style="margin-top: 30px">{{selection}}</pre> 
 
    </form> 
 
</body> 
 

 
</html>

+0

danke für deine wertvolle antwort, wenn ich deine obige antwort in meinem portal benutzt habe, ist es gespeichert wie '" kategorie ": [" true " ], 'Ich möchte Werte nur nicht wie wahr (oder) falsch speichern .... bitte überprüfen Sie meine [Plocker] (http://plnkr.co/edit/WOQpbclGctnarNoW1gKc?p=preview) .... in meinem Modul ich habe codiert wie: - Kategorie: [{ type: String, default: '', erforderlich: 'Select aTLEAST Zwei Kategorie', trim: true }], bitte überprüfen und zu aktualisieren ... dank –

+0

so diese Plünderer von dir ist Klo k gut dann [Plocker] (http://plnkr.co/edit/WOQpbclGctnarNoW1gKc?p=preview) –

Verwandte Themen