[英]How to dynamically add CSS of textbox inside ng-repeat in AngularJS
如何在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
}
使用ng-class,您可以檢查條件,如果值為空,則應用一些CSS。
<input type="text" ng-class="{'manytooneproductcss': YOUR CONDITION}">
使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.