如何更改视图/模型上的按钮单击

how to change view /model on button click?

本文关键字：按钮 单击 模型 何更改 视图      更新时间：2023-09-26

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

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

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

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

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

在弹出窗口关闭时(注意，函数只在单击"select"按钮时调用，而不是在弹出窗口外单击时调用)，我们只需将视图绑定的数据变量更新为新的已检查/未检查状态

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

这是一个工作的活塞

你只需要稍微改变一下你的代码:如: //***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(); };

相关文章：