Question

如何更改AngularJS中ng-repeat内的文本框的CSS？我正在使用它进行验证。它是空白时更新文本框CSS。我试过的是不行。

这是我的代码，看看。

CSS：

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

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：

$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

使用ng-class，你可以检查条件，如果值为空，则应用一些css。

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

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

Answer 2

使用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 个答案: