CODEWITHSUNDEEP
angularjs
Mahbub
Mahbub

Reputation: 3118

AngularJS : Checkbox Label retain original value on un-check

Please look at http://jsfiddle.net/mahbub/sbNty/4/

<div ng-app="">
  <div ng-controller="Ctrl">
        <ul>
            <li ng:repeat="status in statuses"><label><input type="checkbox" data-ng-model="status.type" data-ng-true-value="closed" data-ng-false-value="{{status.type}}" />{{status.type}}</label></li>
      </ul>
  </div>
</div>​

As you can see the label of the checkboxes are printed based on the status type from the JSON. Now on unchecking, the label becomes false. I must be missing some correct way to get back to the originial label text upon unchecking the checkbox.

I mean when I uncheck, the label needs to be "open" or whatever it was initially.

Any help is greatly appreciated.

Thanks

Upvotes: 2

Views: 2047

Answers (1)

Mahbub
Mahbub

Reputation: 3118

Finally i did it using ngInit and setting a different variable within the scope object. See the demonstration here http://jsfiddle.net/mahbub/sbNty/5/ 

<div ng-app="">
  <div ng-controller="Ctrl">
        <ul>
            <li ng:repeat="status in statuses"><label><input ng-init="status.oldStat=status.type" type="checkbox" ng-model="value" ng-click="selectV(value,this)">{{status.type}}</label></li>
      </ul>
  </div>
</div>​

Controller : 

'use strict';

function Ctrl($scope) {
    $scope.statuses = [{
        id: 1,
        type: 'open'},
    {
        id: 2,
        type: 'open'},
    {
        id: 3,
        type: 'new'},
    {
        id: 4,
        type: 'closed'},
    {
        id: 5,
        type: 'open'},
    {
        id: 6,
        type: 'new'},
    {
        id: 7,
        type: 'open'}
];

    $scope.selectV = function(val, stat) {
        if (val) {
            stat.status.type = "closed";
        } else {
            stat.status.type = stat.status.oldStat;
        }
    }
}​

Upvotes: 1

Related Questions