использование ng-класса для значения функции keyup

Я пытаюсь выполнить простое действительное переключение на результат функции keyup. По сути, нажатие клавиши ввода запускает функцию. Он что-то делает, а потом возвращает true или false. При этом должен измениться css-класс span возле входа. Я что-то упустил в ng-классе? Я искал похожую тему, но все еще не мог решить свою проблему.

html-код:

        <div ng-repeat="drug in inputDrugs track by $index">
            <label>Type drug name</label><br/>
            <input ng-keyup="getRxcui(medValue, $index)" ng-model="medValue" placeholder="something like Advil" />
            <span class="alert alert-danger" role="alert" ng-class="{'alert alert-success': getRxcui(medValue, $index)}">?</span>
        </div>

в контроллере.js:

$scope.getRxcui = function(medValue, index){
    var rxcui = '',
        url = 'blabla' + medValue;
    $http.get(url).
        success(function(data, status){
            try {
                // code here goes here and then..       
                return true
            }
            catch(err) {
                // If value is not correct:
                return false
            }
        }).
        error(function(data, status){
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            console.log('error receiving data: ' + status);
            console.error(data);
    });
}

Мне удалось так легко с jQuery, но для меня суть в том, чтобы поддерживать чистоту углового кода. Любая помощь приветствуется, спасибо.


angularjs ng-class
person Alon Weissfeld    schedule 14.06.2015    source источник
comment
Возвращаемое значение бессмысленно, так как все это асинхронно. Нужен совсем другой подход.   -  person Shadow Wizard Wearing Mask V2    schedule 14.06.2015
comment
так как я могу сделать это с помощью angular, скажем, ng-model? могу ли я сделать что-то вроде ng-mode=mymodel, а затем mymodel.css = 'alert...'?   -  person Alon Weissfeld    schedule 14.06.2015
comment
Скоро выложу грубый образец, хотел протестировать, но не успел...   -  person Shadow Wizard Wearing Mask V2    schedule 14.06.2015

Ответы (2)


arrow_upward
1
arrow_downward

Во-первых, вам не нужно «переопределять» класс, который у вас может быть только один. В любом случае, проблема в том, что вы возвращаете значение из промиса, а это бессмысленно.

Кроме того, вы должны связать статус запроса с итератором цикла, поэтому сначала измените разметку на это:

<input ng-keyup="getRxcui(drug, medValue, $index)" ...

Теперь имейте это для диапазона:

<span role="alert" ng-class="{'alert alert-success': drug.rxcuiStatus == 'success', 
    'alert alert-danger': drug.rxcuiStatus == 'failure'}">

И, наконец, в вашей функции:

$scope.getRxcui = function(drug, medValue, index){
    var rxcui = '',
    url = 'blabla' + medValue;
    $http.get(url).
        success(function(data, status){
            try {
               // code here goes here and then..       
               drug.rxcuiStatus = 'success';
            }
            catch(err) {
                // If value is not correct:
                drug.rxcuiStatus = 'failure';
            }
        }).
        error(function(data, status){
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            console.log('error receiving data: ' + status);
            console.error(data);
            drug.rxcuiStatus = 'failure';
    });
};
person Shadow Wizard Wearing Mask V2    schedule 14.06.2015
comment
круто, но как я могу отслеживать каждый индекс в div ng-repeat? (каждый диапазон предназначен для входа, который пользователь может добавить еще один). - person Alon Weissfeld; 14.06.2015

arrow_upward
1
arrow_downward

Ваш ng-класс должен выглядеть так: ng-class="{'alert alert-danger': !success ,'alert alert-success': success}"> . Вот почему:

1) когда вы вызываете getRxcui(medValue, $index) в событии keyup, просто измените значение переменной области: $scope.success = true; в случае успеха или false в противном случае. Затем вы можете использовать это с ng-class : ng-class="{'alert alert-success': success}">.

2) Вы не можете иметь статическую «оповещение об опасности» на элементе. Поскольку у вас может быть только один тип оповещения для этого элемента, и если он статический, то класс успеха будет проигнорирован (вы получите что-то вроде <span class="alert alert-danger alert-success" role="alert"> - второй класс модификатора будет проигнорирован)

person Ana F    schedule 14.06.2015
comment
круто, но как я могу отслеживать каждый индекс в div ng-repeat? (каждый диапазон предназначен для входа, который пользователь может добавить еще один). Если я инициирую $scope.success = ..., то это для всех входов! - person Alon Weissfeld; 14.06.2015