Bind ng-models in input type checkbox

Question

У меня возникла проблема при привязке ng-моделей с ng-repeat в типе входного тега. Сначала я приложу свой код, а затем объясню подробнее.

приложение/main.html:

<div ng-repeat="feature in features"> 
    <input type="checkbox" ng-model="features[$index].name">{{features[$index].name}} 
</div> 
<br></br> 
    <div class="highlighter"> 
    <span ng-class="{emo:Emotions}">Manually</span> <span ng-class="{feel:Feelings}">create</span> the <span ng-class="{emo:Emotions}">entire</span> 
    </div> 

main.js

angular.module('webClientApp') 
    .controller('MainCtrl', function ($scope,$http) { 

     [...other variables...] 

     $scope.features = [{'name':'Emotions'},{'name':'Feelings'}]; 

[...other parts of code] 
}); 

Давайте также предположим, что в файле main.css есть ссылки на классы .emo' and .feel»соответственно, чтобы выделить целевое слово, когда пользователь устанавливает флажок относительно этой функции.

Теперь приложение работает правильно, когда я перечислил все входы один за другим, как следующее:

<input type="checkbox" ng-model="Emotions">Emotions 
<input type="checkbox" ng-model="Feelings">Feelings 

, но я хотел, чтобы обернуть его в нг-повтор и список функций в области контроллера, так как функции, которые я рассмотрю, будут больше. Когда я пытаюсь выполнить код выше, когда я укажу на поле, имя изменится на «true».

Я много читал о том, как привязывать модели к ng-repeat внутри тега ввода, но ни одно из решений не применимо к моему делу. Может кто-нибудь, пожалуйста, помогите мне?

Answer 1

Я изменил немного немного от вашей оригинальной модели, но ... Я получил что-то, чтобы вести себя аналогично тому, что вы ищете.

HTML

<div ng-app="webClientApp"> 
<div ng-controller="MainCtrl"> 
    <div ng-repeat="(feature,enabled) in features"> 
     <input type="checkbox" ng-model="features[feature]">{{feature}}</input> 
    </div> 
     <div class="highlighter"> 
     <span ng-class="{emo:features.Emotions}">Manually</span> <span ng-class="{feel:features.Feelings}">create</span> the <span ng-class="{emo:features.Emotions}">entire</span> 
     </div> 
    {{features}}<br> 
    {{features.Emotions}}<br> 
    {{features.Feelings}} 
</div> 

JS

var app = angular.module('webClientApp', []); 
app.controller('MainCtrl', function($scope, $http) { 
    $scope.features = {Emotions: true, Feelings: true}; 
}); 

Вот скрипка: http://jsfiddle.net/rodhartzell/8YrxQ/

Надеется, что это помогает.

Answer 2

(я должен добавить это в качестве комментария, но я не хватает респ еще.) Существует проблема на GitHub, который касается вашего вопроса: https://github.com/angular/angular.js/issues/1404 и замечание caitp показывает некоторые обходные пути https://github.com/angular/angular.js/issues/1404#issuecomment-30859987

Вы можете (также) определить новый объект javascript в своем контроллере и сопоставить элементы с ним.

В контроллере: $scope.awnsers = {};

В шаблоне: ng-model="awnsers[feature.name]"

Я надеюсь, что это помогает

Answer 3

Вы должны использовать ng-checked вместо ng-model.

Проверить эту jsfiddle

http://jsfiddle.net/fizerkhan/z5z9s/24/

ngModel и ngChecked не предназначены для совместного использования.

ngChecked ожидает выражения, поэтому, говоря ng-checked="master". Если выражение является правдивым, тогда на элементе будет установлен специальный атрибут «checked».

Вы должны иметь возможность использовать только ngModel, привязанный к логическому свойству на вашей модели. Если вы хотите что-то другое, вам либо нужно использовать ngTrueValue и ngFalseValue (которые поддерживают только строки прямо сейчас), либо написать свою собственную директиву.