Как сменить вид/модель на кнопку нажмите?

Question

Я делаю простую демонстрацию, в которой одна кнопка представляет «openpopup». На кнопке нажмите всплывающий экран, на котором пользователь может выбрать несколько элементов. Первоначально первый и второй по умолчанию выбраны. Если вы запустите приложение, вы заметите, что есть 2 колонка тоже данный. (Это происходит потому, что первые два параметра выбраны в нескольких выбранных полях). Когда вы открываете всплывающее окно и выбираете третий вариант, он автоматически создает третий столбец в поле зрения. Я хочу, чтобы это произошло только нажатием кнопки «выбрать» на всплывающем экране. Другими словами, когда пользователь выбирает или рассекает флажок, он автоматически отражается в модели и отображается в поле зрения. Я хочу, чтобы он не отражался на просмотре, пока пользователь не нажал кнопку «Выбрать». Я хочу, чтобы все после кнопки «выбрать»

вот мой код

<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 в данном примере), что не сразу влияет на вид

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

Answer 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(); };