好的，这听起来像是验证，但这更多是礼貌的通知功能。
问题：我有一个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;
}
这是小提琴的链接：小提琴
一个简单的解决方案是将空的class属性添加到每个person对象。
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指令将为您完成此操作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句