AngularJs形成验证与内联ng-repeat无法正常工作

Question

鉴于以下代码，当用户点击“添加属性”按钮时，我有一个新的<tr>显示名称/值的输入字段。当用户完成并单击提交时，它会调用createAttribute($attribute)，它在控制器中执行一些魔术并提交到属性资源。

提交效果很好，但我正在努力让验证工作，我无法弄明白。

我正在使用bootstrap btw。

编辑我还注意到，当我点击新属性的保存，然后再次点击“添加属性”时，它会填充最后一个属性的数据。我怎么能不这样做呢？

<div ng-controller="ServerDetailCtrl">
    <h1>{{server.name}}</h1>
    <p class="text-muted">Last Updated On: {{ server.updatedAt | date:'medium'}}</p>
    <div class="row">
        <div class="col-lg-4">
            <p><strong>Server OS:</strong> {{server.os}}</p>
            <p><strong>OS Version:</strong> {{server.version}}</p>
        </div>
        <div class="col-lg-offset-2 col-lg-6">
            <p><strong>Notes:</strong> {{client.notes}}</p>
        </div>
    </div>
    <h2>Attributes</h2>
    <div class="well">
        <p class="alert alert-danger" ng-show=" attributes == '' && !addMode ">Uhoh! This server doesn't have any attributes, why dont you add one?</p> 
        <table id="attributes" class="table table-striped" ng-hide=" attributes == '' && !addMode ">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Value</th>
                    <th ng-hide="addMode">Last Updated</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="attribute in attributes">
                    <td>{{attribute.name}}</td>
                    <td>{{attribute.value}}</td>
                    <td ng-hide="addMode">{{attribute.updatedAt | date: 'medium'}}</td>
                    <td><button type="button" class="btn btn-xs btn-primary" ng-click="editAttribute(attribute.id)">Edit</button>   <button type="button" class="btn btn-xs btn-danger" ng-click="deleteAttribute(attribute.id)">Destroy</button></td>
                </tr>
                <tr ng-show="addMode">
                    <form name="newAttributeForm" id="newAttributeForm">
                    <td ng-class="{'has-error': name.$invalid}">
                        <input type="text" id="name" name="name" class="form-control" ng-model="attribute.name" placeholder="Attribute Name"  value="" required>
                    </td>
                    <td ng-class="{'has-error': attribute.value.$invalid}">
                        <input type="text" id="value" name="value" class="form-control" ng-model="attribute.value" placeholder="Attribute Value"  value="" required>
                    </td>
                    <td>
                        <button type="button" ng-click="createAttribute($attribute); addMode=false" ng-disabled="attribute.name.$invalid || attribute.value.$invalid" class="btn btn-primary btn-xs">Save</button>
                        <button type="button" ng-click="addMode=false" class="btn btn-danger btn-xs">Cancel</button>
                    </td>
                    </form>
                </tr>
            </tbody>
        </table>
        <button ng-click="addMode = !addMode" type="submit" class="btn btn-primary">Add Attribute</button>
    </div>
</div>