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">
- {{cred.userName}} / {{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
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.
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.
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.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With