如果使用AngularJS更改輸入，如何將類添加到輸入中？

Question

我編碼在我的形式如下：

<td><input type="text" ng-model="row.title" /></td> 

當我看着我的DOM與Chrome開發者工具，我看到以下內容：

<input type="text" ng-model="row.title" class="ng-pristine ng-valid"> 

我怎樣才能讓這個當有對輸入中添加了類的輸入進行了更改？

Answer 1

看看這個的jsfiddle：http://jsfiddle.net/hNrEV/2/

主要思想是利用$scope.$watch要監視更改輸入框。我給了它一個id爲rowTitle，並使用了一個名爲watchRowTitle的指令來監視$scope.row.title的更改，並添加了一個紅色類，只要輸入框中的文本等於'錯誤的標題'，就會將文本變爲紅色。

在指令中進行DOM操作可能是很好的做法。在這裏，watchRowTitle指令返回一個4個鍵的對象：

• 模板 - 它取代了watch-row-title標籤的HTML。我們在這裏不需要這個
• 範圍 - 這裏我們利用一個隔離的範圍。基本上，'='建立了在watch-row-title指令內的scope.title與MyCtrl控制器內的$scope.row.title值之間的雙向數據綁定。
• restrict - 我們給它一個代表元素的值E。因此，這限制了在html標籤內使用watch-row-title指令，換句話說：<watch-row-title></watch-row-title>
• 鏈接 - 這是鏈接功能，有趣的東西發生。在這裏，我們在title上使用scope.$watch。我們必須提供一個帶有2個參數newValue和oldValue的函數（您可以將它們命名爲其他內容，但以這種方式命名它們更有意義），它保存正在監視的變量的新值和舊值。每當scope.title變量變成字符串'錯誤標題'時，它將CSS類'red'添加到輸入框，其編號爲rowTitle（請注意輸入框中的文本如何變成紅色）。否則，它將刪除該CSS類。這部分是使用JQuery完成的。

HTML：

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <input id="rowTitle" type="text" ng-model="row.title" class="ng-pristine ng-valid" /> 
    <watch-row-title title="row.title"></watch-row-title> 
</div> 

CSS：

.red { 
    color: red; 
} 

的JavaScript：

angular.module('myApp', []) 
    .controller('MyCtrl', [ 
     '$scope', 
     function ($scope) { 
      $scope.row = {}; 
     } 
    ]) 
    .directive('watchRowTitle', [ 
     function() { 
      return { 
       template: '', 
       scope: { 
        title: '=' 
       }, 
       restrict: 'E', 
       link: function(scope, element, attr) { 
        scope.$watch('title', function(newValue, oldValue) { 
         if (newValue === 'wrong title') { 
          $('#rowTitle').addClass('red'); 
         } else { 
          $('#rowTitle').removeClass('red'); 
         } 
        }); 
       } 
      }; 
    } 
]); 

Answer 2

有兩個很好的方法可以解決這個問題：

1.使用Angular放入元素的內置ng-dirty類。

當您更改由Angular管理的輸入時，它會爲輸入中的各種狀態添加一些CSS類。這些措施包括：

• ng-pristine - 輸入沒有被修改
• ng-dirty - 輸入已被修改

所以，如果你可以修改你的CSS是基於斷.ng-dirty類，你'很好去。

2.使用form指令和$dirty標誌。

當使用form元件，角分配上具有相同名稱的表格上的name屬性的範圍FormController instance;表單中的每個輸入將作爲一個屬性附加到該FormController實例，同樣的名稱與輸入上的name屬性相同。例如，

<form name="myForm"> 
    <input type="text" name="myInput"> 
</form> 

給你

$scope.myForm.myInput 

每個輸入酒店有一些關於它的自己屬性，包括$pristine和$dirty的;這些工作就像上面列出的CSS類一樣。因此，您可以檢查輸入上的$dirty標誌，並使用ng-class有條件地向該元素應用一個類。舉個例子：

<div ng-controller="MainController"> 
    <form name="myForm"> 
    <input name="myInput" ng-model="model" ng-maxlength="3" 
     ng-class="{changed: myForm.myInput.$dirty}"> 
    </form> 
</div> 

您可以在這裏找到工作的例子：http://jsfiddle.net/BinaryMuse/BDB5b/

Answer 3

HTML

<input type="text" id="inputTitle" ng-model="row.title" /> 

JS

$scope.$watch('row.title', function(newValue) { 
    // Add CSS class on input 
    $('#inputTitle').addClass('YourCSSClass'); 
}, true);