Question

我正在尝试对keyup函数的结果进行简单的有效切换。基本上，输入键盘操作会触发一个功能。它会做一些事情，然后返回true或false。在此之后，输入附近的跨度的css类应该改变。我错过了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，但对我而言，重点是保持角度代码清洁。任何帮助表示赞赏，谢谢。

Answer 1

首先，你不需要＆＃34;覆盖＆＃34;这个班你只能有一个。无论如何，问题是你从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）你不能有静态警报危险＆＃34;在元素上。因为你可以在该元素上只有一个警报类型，如果它是静态的，那么成功类将被忽略（你得到类似<span class="alert alert-danger alert-success" role="alert">的东西 - 第二个修饰符类被忽略）< / p>

在keyup函数值上使用ng-class

2 个答案: