防止ng-select在焦點丟失時發射

我有一個在Angular js中使用數據庫中的值創建的多選框，其中一些預選符合特定條件。防止ng-select在焦點丟失時發射

fooSearch.html

<select multiple ng-model="foo"> 
    <option ng-repeat="item in fooList" 
      value="{{item.id}}" 
      ng-selected="fooIsSelected(item.id)"> 
    {{item.label}} 
    </option> 
</select>

fooSearch-dctv.js

scope.foo = []; 
scope.fooIsSelected = function(id){ 
var isBar = PermissionsFxty.hasPermission('A_PERM') && (id == "15" || id == "16" || id == "17"); 
var isBaz = PermissionsFxty.hasPermission('B_PERM') && (id == "1" || id == "3"); 

if((isBar || isBaz) && scope.foo.indexOf(id) == -1){scope.foo[scope.foo.length] = id;} 

return isBar || isBaz; 
};

的問題是，每當另一個元素焦點fooIsSelected(id)被解僱，重新選擇可能是未選擇任何項目由用戶。無論用戶在多選框失去焦點之前選擇或取消選擇什麼選項，都會發生這種情況。它爲什麼這樣做？在scope.foo上設置$watch並設置標誌，有沒有辦法預防這種情況？

來源

2014-10-20 Lee Abraham

'選擇multiple'是通常是一個尷尬的UI設備;不是每個人都意識到可以通過查看來選擇多個項目。我會建議用複選框替換它。這就是說，[ngModelOptions]（https://docs.angularjs.org/api/ng/directive/ngModelOptions）可能就是你要找的。 – Blazemonger 2014-10-20 15:15:25

經過一些更多的測試後，我更新了我的問題。每當其他元素獲得焦點時就會出現問題。不是當有問題的選擇框失去焦點時。 – 2014-10-20 16:13:46

在我看來，像你這樣濫用ng-selected，從documentation：

ngSelected - 如果表達式爲truthy，「選擇」，那麼特殊的屬性將在元素上設置

而且我認爲代碼中沒有任何邏輯可以查看是否同時選擇了選項或取消選擇。它只會始終評估fooIsSelected，而不考慮用戶選擇或不選擇的內容。我寫下了這段代碼，希望你會發現它有用，here is also a working plunker：

app.js

var values = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" ]; 

function MyCntrl($scope) { 
    $scope.prop = { 
    "type": "select", 
    "name": "id", 
    "selectedValues": someFilterFunction(values), 
    "values": values 
    }; 
} 

function someFilterFunction(array) { 
    // Write any filter you desire here. 
    return array.filter(function(x) { return x == 3 || x == 5 || x == 7 }); 
}

的index.html

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
    <script src="app.js"></script> 
    </head> 
    <body> 
    <div ng-controller="MyCntrl"> 
     <select style="height: 200px" multiple ng-model="prop.selectedValues" ng-options="v for v in prop.values"> 
     </select> 
    </div> 
    </body> 
</html>

來源

2014-10-20 16:13:47

因爲這看起來像一個很好的，乾淨的解決方案。如果我可以在我的應用程序中工作，我會接受它。 – 2014-10-20 16:26:15

防止ng-select在焦點丟失時發射

回答

相關問題