在 keyup 函数值上使用 ng-class

Question

我正在尝试对 keyup 函数的结果进行简单有效的切换。基本上，输入 keyup 动作会触发一个函数。它做了一些事情，然后 returns 真或假。在此基础上，输入附近的跨度 css class 应该发生变化。我在 ng-class 中遗漏了什么吗？我已经搜索过类似的主题，但仍然无法解决我的问题。

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>

在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);
    });
}

我已经设法使用 jQuery 轻松做到了，但对我来说重点是保持 angular 代码干净。感谢您的帮助，谢谢。

Answer 1

对于一个，您不需要 "override" class 您可以只拥有一个。无论如何，问题是你从 Promise 返回一个值，这是没有意义的。

此外，您必须将请求的状态与循环迭代器相关联，因此首先将标记更改为：

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

Answer 2

您的 ng-class 应该如下所示： ng-class="{'alert alert-danger': !success ,'alert alert-success': success}"> 。原因如下：

1) 当您在 keyup 事件上调用 getRxcui(medValue, $index) 时，只需修改作用域变量的值：成功时为 $scope.success = true;，否则为 false。然后您可以将其与 ng-class 一起使用：ng-class="{'alert alert-success': success}">。

2) 元素上不能有静态 "alert-danger"。因为你只能在该元素上有一个警报类型，如果它是静态的，那么成功 class 将被忽略（你会得到类似 <span class="alert alert-danger alert-success" role="alert"> 的东西 - 第二个修饰符 class 被忽略)

在 keyup 函数值上使用 ng-class

using ng-class on keyup function value

angularjs

ng-class