CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Chrillewoodz
Chrillewoodz

Reputation: 28348

How to add a dynamic span element for only one iteration in an ng-repeat?

Here's what I'm trying to achieve, I got a table containing a set of inputs:

<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>

With the signupForm object looking like this:

$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: '[email protected]'
    },
    {
        label: 'Password',
        type: 'password',
        model: 'password',
        placeholder: 'Minimum of 8 characters'
    },
    {
        label: 'Confirm password',
        type: 'password',
        model: 'confirmedPassword',
        placeholder: 'Confirm password'
    }
]

Now, for the row that is "displayName" I need to be able to change the span's content in the error-cell, but only for this row. I've been sitting here trying to figure out a good way of doing so but I can't come up with a decent way to go about this.

Here's an image to show what I mean, the green represents the row that I need to affect, and the blue is the cell that I need to be able to change.

enter image description here

Upvotes: 1

Views: 112

Answers (1)

Danny Blue
Danny Blue

Reputation: 463

you can use an ng-if on that span. The below example just does this for the whole span but you should be able to do something similar

<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>

Upvotes: 2

Related Questions