在ng-if

时间:2017-09-19 09:02:54

标签: javascript angularjs checkbox

我的ng-model值不适用于ng-if下的复选框,但值存在。 它只在双击时才会更新。

<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" />

以下是plunker链接Demo

2 个答案:

答案 0 :(得分:4)

这里你应该使用ng-true-value和ng-false-value的字符串值作为ng-true-value="'1'" ng-false-vale="'0'",因为你的数组将值存储为字符串..

<!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>

答案 1 :(得分:2)

ng-true-value | ng-false-value应定义为String

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

Fixed Demo Plunker