Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-switch-when with ng-repeat

My HTML code is

<tr ng-switch-when="true" ng-repeat="onlineCredentials in onlineCredentialDetails" >
        <td>
            <span>Ordering Mode: </span>{{onlineCredentials.mode}}<br />
            <span>Intermedtiary Group: </span>{{onlineCredentials.name}}
        </td>
        <td>
            <span>Website: </span>{{onlineCredentials.webSite}}
        </td>
        <td >
            <span>Username / Password</span>
            <div ng-repeat="cred in onlineCredentials.loginDetails">
                -&nbsp;{{cred.userName}}&nbsp;/&nbsp;{{cred.password}}
            </div><br />
        </td>
    </tr>

Which is not binding data... (TD s and text is present but binding property values are empty)

How to work with ng-switch-when and ng-repeat at a time?

Thanks in advance

like image 863
Santhosh Avatar asked May 06 '14 12:05

Santhosh


People also ask

Does ng-repeat create a new scope?

Directives that Create Scopes In most cases, directives and scopes interact but do not create new instances of scope. However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.

How do you use two ng-repeat in a table?

You can nest two ng-repeat together in order to create a more complex table. The first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection.

What is the use of NG switch and Ng switch when directives?

Definition and Usage The ng-switch directive lets you hide/show HTML elements depending on an expression. Child elements with the ng-switch-when directive will be displayed if it gets a match, otherwise the element, and its children will be removed.

How do I get an index in NG-repeat?

Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.


2 Answers

ng-switch requires a parent to have a

ng-switch on="variableName"

and children to have

ng-switch-when="stuff1" 

Example with ng-repeat

<div ng-repeat="value in values" ng-switch on="value.color">
    <div ng-switch-when='blue'>Blue</div>
    <div ng-switch-when='green'>Green</div>
    <div ng-switch-when='orange'>Orange</div>
</div>

and your collection for ng-repeat might look like:

$scope.values = {
    one: {color: 'blue', worth: 2},
    two: {color: 'green', worth: 3},
    three: {color: 'orange', worth: 4},        
}

http://plnkr.co/edit/YavzpaPUBaBQNA0pHMPN?p=preview

like image 54
SoluableNonagon Avatar answered Oct 27 '22 16:10

SoluableNonagon


This is by design. Please see https://stackoverflow.com/a/15434085/1264360. Basically to fix you need to have the ng-switch-when in an element above the ng-repeat.

like image 30
Shawn C. Avatar answered Oct 27 '22 15:10

Shawn C.