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

【问题标题】：how to change view /model on button click?如何在按钮单击时更改视图/模型？
【发布时间】：2015-06-02 06:10:58
【问题描述】：

我做了一个简单的演示，其中一个按钮出现“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>

【问题讨论】：

这个问题的任何更新？

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

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

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

“checkboxClicked”函数只是更新当前项目的选中状态

  $scope.checkcoxClicked = function(n){
    $scope.checkedItems[n] = !$scope.checkedItems[n];
  };

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

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

这是一个有效的plunker。

【讨论】：

【解决方案2】：

您只需对代码稍作改动：喜欢： //***for html template <input type="checkbox" ng-model="item.tempChecked" ng-click="itemCheckedUnCheckedhandler(item)">

//*用于控制器
//****在您的数据对象上添加一个新字段（“tempChecked”）*
$scope.data = [{ "label": "Invoice#", "fieldNameOrPath": "Name", "checked": true, 'tempChecked': true }, { "label": "Account Name", "fieldNameOrPath": "akritiv__Account__r.Name", "checked": true, 'tempChecked': true }, { "label": "Type", "fieldNameOrPath": "Type__c", "tempChecked": false, 'checked': false }, { "label": "SO#", "fieldNameOrPath": "akritiv__So_Number__c", 'checked': false, "tempChecked": false }]

//****"选择按钮上的一些变化"***
$scope.closePopover = function() { for (var d in $scope.data) { if ($scope.data[d].tempChecked == true) { $scope.data[d].checked = true; } else { $scope.data[d].checked = false; } } $scope.popover.hide(); };

【讨论】：