Question

我在HTML

中弹出

<div id="term_flags" class="term_flags">
        <div class="modal-users-content flagsContent">
            <div class="modal-users-header">
             <span class="close" ng-click="closeFlagsPopup()">&times;</span>
                <a> Check terminal flags </a>
            </div>
            <div class="modal-flags-body">
                <div class="checkBoxes">
                    <div class="checkerDiv">
                        <input type="checkbox"  ng-model='reservedFlag' ng-click='changeReservedStatus(reservedFlag)' value="flag" ng-checked="reservedFlag"> Reserved
                    </div>
                    <div class="checkerDiv">
                        <input type="checkbox"  ng-model='seasonFlag' ng-click='changeSeasonStatus(seasonFlag)' value="flag" ng-checked="seasonFlag"> Season
                    </div>
                    <div class="checkerDiv">
                        <input type="checkbox"  ng-model='networkFlag' ng-click='changeNetworkStatus(networkFlag)' value="flag" ng-checked="networkFlag"> Network
                    </div>
                </div>
                <div class="saveFlags">
                    <a href="#/problems/zeroized"><button class="button button6" name="changeFlags" value="Change Flags" type="submit" ng-click="saveFlags(item.terminalId)"> Save <p> </button></a>
                </div>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>

这个div display的开头是none。但是从这个div外部调用了一些ng-click，display从none更改为block并初始化此角度函数中的复选框状态

$scope.changeFlagStatus = function(item)
    {
        $scope.reservedFlag=(item.reservedFlag=='T')?true:false;
        $scope.networkFlag=(item.networkFlag=='T')?true:false;
        $scope.seasonFlag=(item.seasonFlag=='T')?true:false;
        document.getElementById('term_flags').style.display = "block";
    }

一切都还可以，但是当我点击reservedFlag changeReservedStatus(reservedFlag)方法时，系统会调用并更改reservedFlag已检查状态

$scope.changeReservedStatus = function(item) {
        $scope.reservedForSave=item;
    }

我将此状态保存在其他变量中并关闭弹出窗口document.getElementById('term_flags').style.display=none

当我再次打开此弹出窗口时，我的函数changeFlagStatus(item)再次被调用并正确初始化我的变量以获取复选框，但我的复选框检查不正确。

例如，当我第一次打开弹出窗口时，初始化后的变量是

$scope.reservedFlag=true;
$scope.networkFlag=false;
$scope.seasonFlag=true;

我的复选框状态为

reservedFlag = checked
networkFlag  = unchecked
seasonFlag   = checked

然后我点击reservedFlag并将其状态从选中状态更改为未选中状态并关闭弹出窗口。然后我第二次打开它，再次调用changeFlagStatus(item)方法再次为复选框状态初始化我的变量我想要

reservedFlag = checked
networkFlag  = unchecked
seasonFlag   = checked

再次，但结果是

reservedFlag = unchecked
networkFlag  = unchecked
seasonFlag   = checked

我怎样才能得到它？

Answer 1

当反复使用原始变量时，Angularjs对于原始变量的范围属性不会很好。我建议你声明一个对象作为范围，并将这些标志设置为该对象的属性。

$scope.flags = {};
$scope.changeFlagStatus = function(item)
{
$scope.flags.reservedFlag=(item.reservedFlag=='T')?true:false;
$scope.flags.networkFlag=(item.networkFlag=='T')?true:false;
$scope.flags.seasonFlag=(item.seasonFlag=='T')?true:false;
document.getElementById('term_flags').style.display = "block";
}

和html部分为

 <input type="checkbox" ng-model='flags.reservedFlag' ng-change='changeReservedStatus()' value="flag" ng-checked="flags.reservedFlag"> Reserved

我建议使用ng-change而不是ng-click，因为这是与复选框一起使用的事件。如果使用ng-change，则可以避免将模型作为参数注入，这有助于利用angularjs的双向绑定功能。

您可以使用true和false将复选框添加ng-true-value和ng-false-value，以使其更易于处理而不是ng-value。我会像这样编写html部分。

<input type="checkbox" ng-model='flags.reservedFlag' ng-change='changeReservedStatus()' ng-true-value="true" ng-false-value="false"> Reserved

希望这能解决问题。

如何在html中重置检查状态

1 个答案: