Question

好的，所以这可能听起来像验证，但它更像是一种礼貌的通知功能。

问题：我有一个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

Answer 1

我更新了你的小提琴 - 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";
        }
    }
};

Answer 2

一个简单的解决方案是将空类属性添加到每个人对象。

<强> 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指令会为您执行此操作。

AngularJS - 在提交时，更改特定的dom属性

2 个答案: