如何在AngularJS中動態地添加ng-repeat中的文本框的CSS

如何在AngularJS中更改ng-repeat中的文本框的CSS？我正在使用它進行驗證。我在更新文本框CSS時，它是空白的。我所嘗試過的不起作用。如何在AngularJS中動態地添加ng-repeat中的文本框的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 
}

來源

2016-12-27 Miranda

使用納克級，你可以檢查康迪如果值爲空應用一些CSS。

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

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

來源

2016-12-27 13:29:58

使用伍一流希望它會幫助你...

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

來源

2016-12-27 13:30:30

如何在AngularJS中動態地添加ng-repeat中的文本框的CSS

回答

相關問題