如何在AngularJS中的ng-repeat中动态添加文本框的CSS

Question

How can I change the CSS of a textbox inside ng-repeat in AngularJS? 如何在AngularJS中的ng-repeat中更改文本框的CSS？ I am using it for validation purposes. 我将其用于验证目的。 I am updating the textbox CSS when it is blank. 空白时，我正在更新文本框CSS。 What I have tried is not working. 我尝试过的没有用。

Here is my code, have a look. 这是我的代码，看看。

CSS: CSS：

.manytooneproductcss {
    border: 1px solid #ff0000;
}

HTML : HTML ：

<table cellpadding="5" cellspacing="0" data-ng-repeat="Item in ProductList" data-ng-cloak>
  <tr>
    <td style="vertical-align:top" class="massWidthCls">
      <span mass-autocomplete>
        <input ProductID="{{Item.ProductID}}" type="text" data-ng-model="Item.SelectedSourceLocationIdManyToOne" mass-autocomplete-item="ac_options__source_location_ManyToOne" placeholder="Type in or scan a location name" data-ng-init="SelectedSourceLocation = dirty.value"  data-ng-change="resetControlManyToOne()" class="manytooneproductcss">
      </span>
    </td>
  </tr>
</table>

<div>
  <div data-ng-click="SaveandContinue();">Save</div>
</div>

JS: JS：

$scope.SaveandContinue = function () {
    angular.forEach($scope.ProductList, function (key) {
        console.log(key.SelectedSourceLocationIdManyToOne)
        if (keepGoing) {
            if (key.SelectedSourceLocationIdManyToOne == "" || key.SelectedSourceLocationIdManyToOne == undefined || key.SelectedSourceLocationIdManyToOne == NaN) {
                toastr["error"]("Please Enter Source Location for Added Line Item !")
                keepGoing = false;
            }
        }
    });    


    if ($scope.selectedTransferMode.Value == 3 && $scope.selectedTransferType.Value == 1) {
        var ProductList = $scope.ProductList;
        for (var i = 0; ProductList.length > i; i++) {
            var productId = ProductList[i].ProductID;
            var LocationID = $scope.selectedTransferMode.Value == 3 ? selectedSourceLocationIds[ProductList[i].SelectedSourceLocationIdManyToOne] : $scope.SelectedSourceLocationId;                    
            if (LocationID <= 0 || LocationID == undefined || LocationID == NaN || LocationID == null) {
                toastr["error"]("Please Enter Source Location for Added Line Item !")
                keepGoing = false;
            }

        }
    }
    // others logic 
}

Answer 1

use ng-class, you can check the condition if value is empty apply some css. 使用ng-class，您可以检查条件，如果值为空，则应用一些CSS。

<input type="text" ng-class="{'manytooneproductcss': YOUR CONDITION}">

https://docs.angularjs.org/api/ng/directive/ngClass https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

Use Ng-class hope it will help you... 使用Ng级希望对您有帮助...

 .strike { text-decoration: line-through; } .bold { font-weight: bold; } .red { color: red; } .has-error { color: red; background-color: yellow; } .orange { color: orange; } /* Copyright 2016 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license */

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app=""> <p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p> <label> <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class) </label><br> <label> <input type="checkbox" ng-model="important"> important (apply "bold" class) </label><br> <label> <input type="checkbox" ng-model="error"> error (apply "has-error" class) </label> <hr> <p ng-class="style">Using String Syntax</p> <input type="text" ng-model="style" placeholder="Type: bold strike red" aria-label="Type: bold strike red"> <hr> <p ng-class="[style1, style2, style3]">Using Array Syntax</p> <input ng-model="style1" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br> <input ng-model="style2" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br> <input ng-model="style3" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br> <hr> <p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p> <input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"><br> <label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label> </body>

如何在AngularJS中的ng-repeat中动态添加文本框的CSS

问题描述

2 个解决方案

解决方案1
0 2016-12-27 13:29:58

解决方案2
0 2016-12-27 13:30:30

如何在AngularJS中的ng-repeat中动态添加文本框的CSS

问题描述

2 个解决方案

解决方案1 0 2016-12-27 13:29:58

解决方案2 0 2016-12-27 13:30:30

解决方案1
0 2016-12-27 13:29:58

解决方案2
0 2016-12-27 13:30:30