Javascript 如何在单击按钮时更改视图/模型？

我做了一个简单的演示，其中一个按钮显示“openpopup”。点击按钮时，会显示一个弹出屏幕，用户可以在其中选择多个元素。最初默认选择第一个和第二个。如果运行应用程序，您会注意到还有两列。（这是因为前两个选项是在“多个选定”框中选择的）。当您打开弹出窗口并选择第三个选项时，它会自动在视图中创建第三列。我希望这种情况只发生在单击“选择”按钮时按钮在弹出屏幕上。换句话说，当用户选择或剖析复选框时，它会自动反映在模型中并显示在视图中。我希望在用户未按下“选择”按钮之前，它不会反映在视图中。我希望在“选择”按钮之后的所有内容

这是我的密码

 <button ng-click="openPopover($event)">
      openpopup
     </button>
         <script id="my-column-name.html" type="text/ng-template">
        <ion-popover-view>
            <ion-header-bar>
                <h1 class="title">My Popover Title</h1>
            </ion-header-bar>
            <ion-content>
                <ul class="list" ng-repeat="item in data">

                    <li class="item item-checkbox">
                        <label class="checkbox">
                            <input type="checkbox" ng-model="item.checked" ng-click="itemCheckedUnCheckedhandler(item)">
                        </label>
                        {{item.label}}
                    </li>
                </ul>
                <button ng-click="closePopover()">select</button>
            </ion-content>

        </ion-popover-view>
    </script>

openpopup
我的Popover头衔


{{item.label}


选择

在我看来，最好的方法是将选中的项绑定到中介变量（本例中为checkedItems），这不会立即影响视图

<input type="checkbox" ng-model="checkedItems[$index]" ng-click="checkboxClicked($index)">

在弹出窗口关闭时（请注意，该函数仅在单击“选择”按钮时调用，而不是在弹出窗口外单击时调用），我们只需使用新的选中/未选中状态更新视图绑定数据变量

$scope.closePopover = function() {
   for (var i = 0; i < $scope.data.length; i++){
        $scope.data[i].checked = $scope.checkedItems[i];
   }
   $scope.popover.hide();
};

$scope.closePopover=function（）{
对于（变量i=0；i<$scope.data.length；i++）{
$scope.data[i].checked=$scope.checkedItems[i]；
}
$scope.popover.hide（）；
};

---

这是一个可行的解决方案。

您只需对代码进行一点更改： 比如：

//***用于html模板

//*用于控制器
//****在数据对象上添加一个新字段（“tempChecked”）*

$scope.data=[{
“标签”：“发票”，
“fieldNameOrPath”：“名称”，
“检查”：正确，
“tempChecked”：true
}, {
“标签”：“账户名称”，
“fieldNameOrPath”：“akritiv\uuuuuu账户名称”，
“检查”：正确，
“tempChecked”：true
}, {
“标签”：“类型”，
“fieldNameOrPath”：“Type_u_c”，
“tempChecked”：false，
“选中”：false
}, {
“标签”：“SO#”，
“fieldNameOrPath”：“akritiv\uuuu So\u编号\uuuuu c”，
“checked”：false，
“tempChecked”：false
}]

//****“选择按钮上的某些更改”***

$scope.closePopover=function（）{
for（变量d在$scope.data中）{
if（$scope.data[d].tempChecked==true）{
$scope.data[d].checked=true；
}否则{
$scope.data[d]。选中=false；
}
}
$scope.popover.hide（）；
};
此问题有任何更新吗？
$scope.closePopover = function() {
   for (var i = 0; i < $scope.data.length; i++){
        $scope.data[i].checked = $scope.checkedItems[i];
   }
   $scope.popover.hide();
};