using ng-class on keyup function value

Question

I am trying to accomplish a simple valid toggle on the outcome of a keyup function. Basically, an input keyup action triggers a function. It does some stuff, then returns true or false. Upon this, the css class of span near the input should changes. Am I missing something in ng-class? I have searched for a similar topic but still couldn't overcome my problem.

html code:

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

in controller.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);
    });
}

I have managed to to so easily with jQuery, but the point for me is to keep angular code clean. Any help is appreciated, thanks.

Answer 1

For one, you don't need to "override" the class you can have only one. Anyhow, the problem is that you are returning a value from a Promise, and it's meaningless.

Also, you have to associate the status of the request with the loop iterator so first change the markup to this:

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

Now have this for the span:

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

And finally in your function:

$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';
    });
};

Answer 2

Your ng-class should look like this: ng-class="{'alert alert-danger': !success ,'alert alert-success': success}"> . Here's why:

1) when you call getRxcui(medValue, $index) on the keyup event, simply modify the value of a scope variable: $scope.success = true; on success or false otherwise. You can then use that with ng-class : ng-class="{'alert alert-success': success}">.

2) You can't have a static "alert-danger" on the element. Because you can have only one alert type on that element, and if that's static, then the success class will be ignored (you'd get something like <span class="alert alert-danger alert-success" role="alert"> - second modifier class gets ignored)