Question

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

这是我的代码

 <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>

Answer 1

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

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

＆＃34; checkboxClicked＆＃34; function只是更新当前项的检查状态

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

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

paintEvent( ... )

这是一个有效的plunker。

Answer 2

你只需改变代码：喜欢： No provider for NameService

对于控制器，

// * // ****在数据对象上添加一个新字段（＆＃34; tempChecked＆＃34;）
//***for html template <input type="checkbox" ng-model="item.tempChecked" ng-click="itemCheckedUnCheckedhandler(item)">

// ****＆＃34;对您的选择按钮进行了一些更改＆＃34; ***
$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 }]

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

2 个答案: