CODEWITHSUNDEEP
javascriptangularjscheckbox
Faiyaz Md Abdul
Faiyaz Md Abdul

Reputation: 667

check box value not applied under ng-if

My ng-model value is not applied to checkbox under ng-if ,though value is present . It gets updated only on double click .

<div ng-show="isTrue == true">
<label>
  <input type="checkbox" name="test1" ng-model="a.testModel[0]" ng-true-value="1" ng-false-value="0" /> Testing 1 {{a.testModel[0]}}</label>
<br />
<label>
  <input type="checkbox" name="test2" ng-model="a.testModel[1]" ng-true-value="1" ng-false-value="0" /> Testing 2</label>
<br />
<label>
  <input type="checkbox" name="test3" ng-model="a.testModel[2]" ng-true-value="1" ng-false-value="0" /> Testing 3</label>
<br />
<input type="button" ng-click="submit()" value="Submit" />

Here is the plunker link Demo

Upvotes: 1

Views: 172

Answers (2)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

ng-true-value | ng-false-value should be defined as String

 ng-true-value="'1'" ng-false-value="'0'"

Fixed Demo Plunker

Upvotes: 2

Nitheesh
Nitheesh

Reputation: 19986

Here you should use a string value for ng-true-value and ng-false-value as ng-true-value="'1'" ng-false-vale="'0'" because your array stores the values as string..

<!doctype html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script>
        var app = angular.module('plunker', []);

        app.controller('MainCtrl', function ($scope) {
            $scope.setTrue = function () {
                $scope.isTrue = true;
            }
            $scope.name = 'World';
            $scope.a = {};
            $scope.a.testModel = ["1", "1", "0"];
            $scope.submit = function () {
                console.log($scope.testModel);
            };
        });
    </script>
</head>

<body ng-controller="MainCtrl">
    <button ng-click="setTrue()">set true - {{isTrue}}</button>
    <div ng-show="isTrue == true">
        <label>
            <input type="checkbox" name="test1" ng-model="a.testModel[0]" ng-true-value="'1'" ng-false-vale="'0'" /> Testing 1 {{a.testModel[0]}}</label>
        <br />
        <label>
            <input type="checkbox" name="test2" ng-model="a.testModel[1]" ng-true-value="'1'" ng-false-vale="'0'" /> Testing 2</label>
        <br />
        <label>
            <input type="checkbox" name="test3" ng-model="a.testModel[2]" ng-true-value="'1'" ng-false-vale="'0'" /> Testing 3</label>
        <br />
        <input type="button" ng-click="submit()" value="Submit" />
    </div>
    <pre>{{testModel|json}}</pre>
</body>

</html>

Upvotes: 3

Related Questions