Question

HTML代码：

<div id="createConfigManagementDivId" 
    class="panel-portal">
    <h1 class="titlebar ng-binding">
        GUI Configuration Data</h1>


    <div class="grid span-20 centered vlead-2">
    <ul class="tabs">
                                <li>
                                    <a href="#">Boolean Data </a>
                                    <div class="content">
                                         <h2> Boolean Data</h2>
                                        <div>

                                            <div ng-repeat="chk in boolchkbxs">

                                                    <label>{{chk.label}}</label>

                                                    <input type="checkbox"  ng-change="GetBoolValue(chk)" ng-model="chk.Selected" />
                                                </div>

                                        </div>
                                    </div>
                                </li>


                            </ul>
    </div>


    <div class="text-right buttonbar">
        <button id="applyButton">Apply</button>
        <button id="updateCacheButton">Update GUI cache</button>
        <button id="clearButton" ng-click="clearForm()" >Cancel</button>
    </div>

<script type="text/javascript">
$(document).ready(function(){


});

</script>

控制器：

$scope.boolchkbxs = [{ label: "XXXX", Selected: true }];
$scope.GetBoolValue = function () {
    var message = "";
    for (var i = 0; i < $scope.boolchkbxs.length; i++) {
        console.log($scope.boolchkbxs[i].Selected);
        if ($scope.boolchkbxs[i].Selected) {
            var lableName = $scope.boolchkbxs[i].label;
            message += lableName + ",";
        }
    }
}

但是我无法在上面的代码中的复选框中获取用户修改的最新值。 $ Scope.boolchkbxs [i] .Selected始终返回true（这是默认值）;

有人可以帮我解决问题吗？

即使我在没有ng-repeat的情况下为单个复选框尝试了相同的操作，仍然返回默认值而不是更新值。

当我更改checkbok的值

时，不会调用函数GetBoolValue

Answer 1

更改chackbox值时应调用GetBoolValue。我想这应该是你期待的。现在，您可以获取所选复选框的值并查找标签并计算消息。

Answer 2

问题是由于使用jQuery设置checkbox的值。因此ng-model值不会更新。

要解决这个问题，我在控制器（jsfiddle）中写了checkboxWithChangeHandler。

<强> HTML

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" ng-model="check"/> Default
    </label> 
    <label class="btn btn-primary">
        <input type="checkbox" ng-model="check" checkbox-with-change-handler/> Checkbox with change handler
    </label>
</div>

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" ng-model="radio" value="onclick"/> Default
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" ng-model="radio" value="onchange" radio-with-change-handler/> Radio with change handler
     </label>
</div>

<br/>
Checkbox: <span ng-bind="check"></span><br/>
Radio: <span ng-bind="radio"></span>

<强>的javascript：

var app = angular.module('app', []);
app.directive('checkboxWithChangeHandler', [function checkboxWithChangeHandler() {
    return {
        replace: false,
        require: 'ngModel',
        scope: false,
        link: function (scope, element, attr, ngModelCtrl) {
            $(element).change(function () {
                scope.$apply(function () {
                    ngModelCtrl.$setViewValue(element[0].checked);
                });
            });
        }
    };
}]);
app.directive('radioWithChangeHandler', [function checkboxWithChangeHandler() {
    return {
        replace: false,
        require: 'ngModel',
        scope: false,
        link: function (scope, element, attr, ngModelCtrl) {
            $(element).change(function () {
                if (element[0].checked) {
                    scope.$apply(function() {
                        ngModelCtrl.$setViewValue(attr.value);
                    });
                }
            });
        }
    };
}]);

Ng模型无法为控制器中的复选框提供更新值

2 个答案: