AngularJS - 在提交時，更改特定的dom屬性

好的，所以這可能聽起來像驗證，但它更像是一個禮貌通知函數。AngularJS - 在提交時，更改特定的dom屬性

問題：我有一個ng-repeat，它在輸入框中以姓氏的形式顯示個人數據，以允許用戶編輯姓名和/或姓氏。我想在提交時通知用戶他們將提交沒有名字姓氏的數據。目前我可以很容易地找到無名姓氏，但只要我應用了CSS，它就會應用於所有元素。如何僅將它應用於無名對象？另外，這應該通過指令來完成嗎？

我已經嘗試過相當多的東西了，現在最簡單的解決方案如下所示。

注意：此示例用於更復雜數據結構的概念證明，因此是愚蠢的數據。

下面是代碼：

HTML：

<body ng-app="ap" ng-controller="con"> 
<table> 
    <tr> 
     <td>name</td> 
     <td>surname</td> 
    </tr> 
    <tr ng-repeat="person in persons"> 
     <td> 
      <input type='text' 
      ng-class="empty" 
      ng-model="person.name" 
      value="{{ person.name }}"/> 
     </td> 
     <td> 
      <input type='text' 
      ng-model="person.surname" 
      value="{{ person.surname }}"/> 
     </td> 
    </tr> 
</table> 
<button ng-click="submit()">Change Class</button>

控制器：

var app = angular.module("ap",[]); 

    app.controller("con",function($scope){ 

    $scope.persons = [ 
     {name: '', surname: 'Peters'}, 
     {name: 'Sue', surname: 'Anne'}, 
     {name: 'Jack', surname: 'Daniels'}, 
     {name: '', surname: ''}, 
     {name: '', surname: 'Bar'}, 
     {name: '', surname: 'Other'}, 
    ]; 

    $scope.empty = "normal"; 

    $scope.submit = function(){ 
     for(var i = 0; i < $scope.persons.length; i++) { 
      if($scope.persons[i].name === '') { 
        $scope.empty = "empty"; 
      } 
     } 
    }; 
});

CSS：

.empty{ 
border-style: solid; 
border-color: rgba(255, 135, 66, 0.75); 
background-color: rgba(252, 102, 2, 0.54); 
} 

.normal{ 
    color: black; 
}

這裏是小提琴的鏈接：fiddle

來源

2014-09-12 avn

我更新了你的小提琴 - http://jsfiddle.net/h80ky4fs/8/ - 使$ scope.empty一個數組，並修改了HTML同樣

$scope.submit = function(){ 
    for(var i = 0; i < $scope.persons.length; i++) { 
     if($scope.persons[i].name === '') { 
       $scope.empty[i] = "empty"; 
     } 
    } 
};

來源

2014-09-12 15:14:18

出於好奇，你爲什麼要$ scope.empty一個數組？是否這樣重複中的每個項目都匹配'空'數組中的索引和值？ – avn 2014-09-15 06:46:26

每個ngRepeat都會創建一個小的局部範圍，因此您需要一組值來控制它們。在您的代碼中，您希望$ scope.empty同時控制x個不同的事物，並且您得到的是*所有*元素都被突出顯示或未突出顯示。如果您對此方法感到滿意，請將其標記爲已接受的答案。 – 2014-09-15 07:00:20

太好了，謝謝你的分配。我感覺合理。這兩個答案都可以工作，但我更喜歡你的方法，這使得稍後用觀察者去除類更容易。 – avn 2014-09-15 08:05:03

一簡單的解決方案是將空的類屬性添加到每個人物件。

FORKED FIDDLE

JAVASCRIPT

$scope.submit = function(){ 
    var persons = $scope.persons, person; 
    for(var i = 0; i < persons.length; i++) { 
     var person = persons[i]; 
     person.empty = person.name? '': 'empty'; 
    } 
};

HTML

<tr ng-repeat="person in persons"> 
     <td> 
      <input type='text' 
      ng-class="person.empty" 
      ng-model="person.name"/> 
     </td> 
     <td> 
      <input type='text' 
      ng-model="person.surname"/> 
     </td> 
    </tr>

注意：您無需顯式聲明value屬性，因爲ng-model指令將爲你做。

來源

2014-09-12 15:15:16 ryeballar

感謝您的回答，效果很好，@Simon H的回答更適合我需要的實施。也謝謝您指出冗餘價值聲明。 – avn 2014-09-15 08:09:31

我以某種方式編輯了我的答案，其中用戶提交第二次的提琴的一些問題以及具有內容的輸入仍保留「空」類。 – ryeballar 2014-09-15 08:22:10

需要注意的是，我必須對我遇到的問題實施分頁，並且您的回答更好地完成了這項工作，ng-repeat應用了過濾器，因此$ index變得毫無用處。再次感謝。 – avn 2014-09-16 07:40:42

AngularJS - 在提交時，更改特定的dom屬性

回答

相關問題