javascript - 如何为 ng-repeat 中的一次迭代添加动态跨度元素？

Question

这是我想要实现的目标，我得到了一个包含一组输入的表格:

<tr ng-repeat="row in signupForm track by $index" 
    class="data-row">
    <td class="label-cell data-cell">
        <label for="{{row.model}}" ng-bind="(row.label) + ':'"></label>
    </td>
    <td class="data-cell">
        <input type="{{row.type}}" ng-model="user[row.model]"
               placeholder="{{row.placeholder}}" 
               class="round input" id="{{row.model}}">
    </td>
    <td class="error-cell data-cell">
        <span class="error">*</span> //Need to be able to insert image here instead
    </td>
</tr>

signupForm 对象如下所示:

$scope.signupForm = [
    {
        label: 'Firstname',
        type: 'text',
        model: 'firstname',
        placeholder: 'Firstname'
    },
    {
        label: 'Lastname',
        type: 'text',
        model: 'lastname',
        placeholder: 'Lastname'
    },
    {
        label: 'Age',
        type: 'text',
        model: 'age',
        placeholder: 'Age'
    },
    {
        label: 'Country',
        type: 'text',
        model: 'country',
        placeholder: 'Country'
    },
    {
        label: 'Display name',
        type: 'text',
        model: 'displayName',
        placeholder: 'Maximum of 16 characters'
    },
    {
        label: 'E-mail',
        type: 'email',
        model: 'email',
        placeholder: 'Example@backslash.com'
    },
    {
        label: 'Password',
        type: 'password',
        model: 'password',
        placeholder: 'Minimum of 8 characters'
    },
    {
        label: 'Confirm password',
        type: 'password',
        model: 'confirmedPassword',
        placeholder: 'Confirm password'
    }
]

现在，对于“displayName”这一行，我需要能够更改 error-cell 中的跨度内容，但仅限于这一行。我一直坐在这里试图找出一个好的方法，但我想不出一个合适的方法来解决这个问题。

这是一张图片来说明我的意思，绿色代表我需要影响的行，蓝色代表我需要能够更改的单元格。

Answer 1

您可以在该跨度上使用 ng-if。下面的示例只是对整个跨度执行此操作，但您应该能够执行类似的操作

<tr ng-repeat="row in signupForm track by $index" 
    class="data-row">
    <td class="label-cell data-cell">
        <label for="{{row.model}}" ng-bind="(row.label) + ':'"></label>
    </td>
    <td class="data-cell">
        <input type="{{row.type}}" ng-model="user[row.model]"
               placeholder="{{row.placeholder}}" 
               class="round input" id="{{row.model}}">
    </td>
    <td class="error-cell data-cell">
        <span class="error" ng-if="row.model === 'displayName'">*</span>
    </td>
</tr>