CODEWITHSUNDEEP
javascriptangularjsformscheckboxangularjs-ng-repeat
josh_boaz
josh_boaz

Reputation: 2023

ng-repeat behaving unexpectedly and and ng-true-value and ng-false-value not working correclty

html

<div class="form-inline col-xs-12"  ng-repeat="c in evnetChannels track by $index">
<label class="control-label col-xs-6">
<input type="checkbox"
     ng-checked="ChannelisChecked(c.channelTypeId)"
     ng-click="ChannelToggleCheckbox(c.channelTypeId)"
     ng-true-value="'Y'" ng-false-value="'N'" >
     {{c.channelTypeName}} {{ChannelisChecked(c.channelTypeId)}}
</label>
<input class="form-control col-xs-6" type="text" ng-show="c.textRequired=='Y'">
</div>

javascript

$scope.ChannelisChecked = function (val) {
        console.log(val);
        var chnl = _.find($scope.formData_EventDescription.eventChannelList, function (channel) {
            return channel.channelTypeId == val;
        });
        if(chnl){
            return chnl.isChecked;
        }
        else {
            return 'N';
        }
    };

$scope.evnetChannels = [{
      "channelTypeId": 1,
      "channelTypeName": "c1",
      "textRequired": "Y",
      "action": "Y"
    },
    {
      "channelTypeId": 2,
      "channelTypeName": "c2",
      "textRequired": "Y"
    },
    {
      "channelTypeId": 3,
      "channelTypeName": "c3",
      "textRequired": "N"
    }];

$scope.formData_EventDescription.eventChannelList = [{
     "channelTypeId": 1,
     "isChecked": "Y"
},
{
     "channelTypeId": 3,
     "isChecked": "Y"
 }];

I am having issue most important that when the checkboxes are displayed, all of them are checked instead of only one's that are suppose to be . And also when i look at the logs after loading the page, it prints out the console.log(val) quite many times.

Any ideas what is going wrong here?

Upvotes: 0

Views: 100

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is ng-checked directive should return truthy/falsy values to check/uncheck the checkbox.

In your case you are always returns Y or N both of which are truthy so the checkboxes are always checked.

  $scope.ChannelisChecked = function(val) {
    var chnl = _.find($scope.formData_EventDescription.eventChannelList, function(channel) {
      return channel.channelTypeId == val;
    });
    if (chnl) {
      return chnl.isChecked == 'Y';
    } else {
      return false;
    }
  };


var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.formData_EventDescription = {};

  $scope.ChannelisChecked = function(val) {
    var chnl = _.find($scope.formData_EventDescription.eventChannelList, function(channel) {
      return channel.channelTypeId == val;
    });
    if (chnl) {
      return chnl.isChecked == 'Y';
    } else {
      return false;
    }
  };


  $scope.evnetChannels = [{
    "channelTypeId": 1,
    "channelTypeName": "c1",
    "textRequired": "Y",
    "action": "Y"
  }, {
    "channelTypeId": 2,
    "channelTypeName": "c2",
    "textRequired": "Y"
  }, {
    "channelTypeId": 3,
    "channelTypeName": "c3",
    "textRequired": "N"
  }];

  $scope.formData_EventDescription.eventChannelList = [{
    "channelTypeId": 1,
    "isChecked": "Y"
  }, {
    "channelTypeId": 3,
    "isChecked": "Y"
  }]
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <div class="form-inline col-xs-12" ng-repeat="c in evnetChannels track by $index">
      <label class="control-label col-xs-6">
        <input type="checkbox" ng-checked="ChannelisChecked(c.channelTypeId)" ng-click="ChannelToggleCheckbox(c.channelTypeId)" ng-true-value="'Y'" ng-false-value="'N'">{{c.channelTypeName}} {{ChannelisChecked(c.channelTypeId)}}
      </label>
      <input class="form-control col-xs-6" type="text" ng-show="c.textRequired=='Y'">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions