Bind ng-models in input type checkbox

Question

I have a problem when binding ng-models with ng-repeat in a input tag type checkbox. I will first attach my code and then explain more in detail.

app/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]
});

Let's also assume that in the main.css file there are references to the classes .emo' and.feel' respectively to highlight the target word when the user ticks the box relative to the feature.

Now, the application works correctly when I listed all the inputs one by one like the following:

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

but I wanted to wrap it into an ng-repeat and list the features in the controller scope, since the features I will considered will be more. When I try the code above when I tick on the box the name changes to `true'.

I have read a lot about how to bind models to an ng-repeat inside a input tag but none of the solutions apply to my case. Can someone please help me?

Answer 1

I changed thigs up quite a bit from your original model but... I did get something to behave similar to what you are looking for.

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

Here's the fiddle: http://jsfiddle.net/rodhartzell/8YrxQ/

Hope this helps.

Answer 2

(i should add this as a comment, but I don't have enough rep. yet) There is an issue on github which concerns your issue: https://github.com/angular/angular.js/issues/1404 and the comment of caitp shows some workarounds: https://github.com/angular/angular.js/issues/1404#issuecomment-30859987

You could (also) define a new javascript object in your controller and map the elements to that.

In controller: $scope.awnsers = {};

In template: ng-model="awnsers[feature.name]"

I hope this helps

Answer 3

You must use ng-checked instead of ng-model.

Check out this jsfiddle

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

ngModel and ngChecked are not meant to be used together.

ngChecked is expecting an expression, so by saying ng-checked="master". If the expression is truthy, then special attribute "checked" will be set on the element

You should be able to just use ngModel, tied to a boolean property on your model. If you want something else, then you either need to use ngTrueValue and ngFalseValue (which only support strings right now), or write your own directive.