angularjs - 更新`ac-change`後的`acute.select`列表

我在我的angularjs項目中使用acute.select。我有一個array：angularjs - 更新`ac-change`後的`acute.select`列表

$scope.users = []; 
$scope.acuteusers =[{UserName:"john"},{UserName:"joe"},{UserName:"mary"}]; 

     $scope.stateSelected = function(state){ 
      console.log(state); 
      for (var i = 0; i < $scope.acuteusers.length; i++) { 
       if (state.UserName == $scope.acuteusers[i].UserName) { 
        $scope.acuteusers.splice(i,1); 
       }; 
      }; 
      console.log($scope.acuteusers); 
     }

和html：

<select class="ac-select stateList" ac-model="users" ac-options="s.UserName for s in acuteusers" 
     ac-settings="{ comboMode: true, loadOnOpen: true, minWidth: '470px' }" ac-change="stateSelected(value)" > 
     </select>

我想從acute.select下拉列表一切選擇的元素取出元素。但不知怎的，它將保持爲初始狀態（沒有元素被刪除），即使console.log顯示它已被取出。我該如何解決這個問題？

來源

2015-12-30 sooon

這可能是你的'ac-'問題。在拼接過程中添加一個$超時有時觸發'$ digest'需要一些時間。 –

我認爲拼接應該像$ scope.acuteusers.splice（i，1）; – Nir

不要在迭代它時修改數組，它是一種反模式。如果在迭代時必須從數組中移除元素，請向後執行（使用'array.len'開始計數並遞減）。 –

經過大量閱讀關於指令隔離範圍（link1,link2）後，我決定破解acute.select.js指令。

首先，我加入一個新的scope data在acute.select.js：

.directive("acSelect", function($parse, acuteSelectService) { 
    var defaultSettings = acuteSelectService.getSettings(); 
    return { 
     restrict: "EAC", 
     scope: { 
      "acSettings": "@", 
      "acOptions": "@", 
      "model": "=acModel", 
      "acChange": "&", 
      "keyField": "@acKey", 
      "acRefresh": "=",///I believe you can use this, but no documentation at all. 
      "acFocusWhen": "=", 
      "id": "@", 
      data:"=acuteOptions"///newly added by me. 
     }, 
replace: true, 
     templateUrl: defaultSettings.templatePath + "acute.select.htm", 
     link: function(scope, element, attrs) { 
      scope.initialise(); 

      ///**Then I added in $watchCollection to watch the `data` changes. 
      scope.$watchCollection('data', function(newVals, oldVals) { 
      ///**I found out scope.allItems is the array to build and display the list. 
///however it must follow {text,value,index} object format. So I reformat it that way. 
      scope.allItems = []; 
      for (var i = 0; i < newVals.length; i++) { 
      scope.allItems.push({text:newVals[i].UserName,value:newVals[i],index:i}); 
      }; 
      }, true); 
     },

在html，加入acute-options：

<select class="ac-select stateList" ac-model="users" acute-options="acuteusers" ac-options="s.UserName for s in acuteusers" 
     ac-settings="{ comboMode: true, loadOnOpen: true, minWidth: '470px' }" ac-change="stateSelected(value)" > 
     </select>

現在，每當$scope.acuteuser的變化，它會改變的下拉列表中。

我仍然相信acRefresh可以做這項工作，但我只是無法弄清楚。如果有人可以分享更強大的解決方案，那將會很好。

來源

2015-12-30 11:39:13 sooon

angularjs - 更新`ac-change`後的`acute.select`列表

回答

相關問題