Как динамически добавить CSS текстового поля внутри ng-repeat в AngularJS

Как изменить CSS текстового поля внутри ng-repeatв AngularJS? Я использую его для целей проверки. Я обновляю TextBox 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 
}

2 ответа

  1. Используйте надежду НГ-класса она поможет вам…

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