Предотвращение 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) увольняют и повторно выбирает любые предметы, которые, возможно, были невыбранные пользователем. Это происходит независимо от того, какие параметры пользователь выбрал или не выбрал до того, как поле мультиселектора потеряет фокус. Почему он это делает? Есть ли способ предотвратить это с размещением $watch на scope.foo и установкой флага?

источник

2014-10-20 Lee Abraham

'выбрать multiple' является обычно неудобный пользовательский интерфейс; не каждый понимает, что несколько элементов можно выбрать, посмотрев на него. Я бы предложил заменить его флажками. Тем не менее, [ngModelOptions] (https://docs.angularjs.org/api/ng/directive/ngModelOptions) может быть тем, что вы ищете. – Blazemonger

После некоторого тестирования я обновил свой вопрос. Проблема возникает, когда другой элемент получает фокус. Не тогда, когда поле выбора теряет фокус. –

Кажется мне, как вы злоупотребляя 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

Голосовать, потому что это похоже на хорошее, чистое решение. Я приму это, если смогу заставить его работать в моем приложении. –

Предотвращение ng-select при стрельбе, когда фокус потерян

ответ

Смежные вопросы