What's the best practice of toggling elements in nested ng-repeaters? I have the following angular template:
<div>
{{question.Description}}
<div ng-repeat="answer in question.Answers">
{{answer.Description}}
<div ng-repeat="qAnswer in answer.Questions"><!-- Hide/show here -->
{{qAnswer.Description}}
<div ng-repeat="childAnswer in qAnswer.Answers"><!-- Hide/show here -->
{{childAnswer.Description}}
</div>
</div>
</div>
</div>
Edit:
I'd like to toggle based on click action
<div>
{{question.Description}}
<div ng-repeat="answer in question.Answers">
{{answer.Description}}
<div ng-repeat="qAnswer in answer.Questions" ng-show="answer.show"><!-- Hide/show here -->
{{qAnswer.Description}}
<div ng-repeat="childAnswer in qAnswer.Answers" ng-show="qAnswer.show"><!-- Hide/show here -->
{{childAnswer.Description}}
</div>
</div>
</div>
</div>
u need to set the object value to true or false, then angularjs will do the rest.
Try something like this,
<div ng-init="items_display=[]">
{{question.Description}}
<div ng-repeat="answer in question.Answers">
{{answer.Description}}
<div ng-repeat="qAnswer in answer.Questions"><!-- Hide/show here -->
{{qAnswer.Description}}
<div ng-repeat="childAnswer in qAnswer.Answers" ng-show="items_display[$index]"><!-- Hide/show here -->
{{childAnswer.Description}}
</div>
</div>
</div>
</div>
Related
I am trying to use a uib-popover-template. It worked before, but now empty popup without data(can't attach img). How can i fix this issue? Code below
<div class="subject"
uib-popover-template="'popover.html'"
popover-placement="bottom-left"
popover-trigger="'outsideClick'">
<a>{{user.first_name}} {{user.last_name}}</a>
</div>
<script type="text/ng-template" id="popover.html">
<div class="media">
<div class="media-left">
<img class="user-icon" ng-src="{{user.actions.server}}storage/user/mini/{{user.user.avatar}}" />
</div>
<div class="media-body">
{{user.first_name}} {{user.last_name}}
</div>
</div>
</script>
The ng-src directive works better with just one interpolation binding:
<!-- REPLACE
<img ng-src="{{user.actions.server}}storage/user/mini/{{user.user.avatar}}" />
-->
<!-- INSTEAD -->
<img ng-src="{{user.actions.server +'storage/user/mini/'+ user.user.avatar}}" />
I have this code in my html file and all the values from the ng-repeat are correct and shown the way I want. I have some angular directives such as ng-if, ng-blur and ng-model, but none of them are working. I don't have a clue of what can it be.
<div ng-if="view===true">
<div class="serie_list">
<div ng-repeat="serie in series | filter: { id:id_serie }"
collection-item-width="'100%'"
collection-item-height="100">
<div class="row">
<div class="col col-33">
<img class="img_item" imagenie="{{url}}/exercicios/{{serie.id_exercicio}}-0.gif" width="100%" height="100%"/>
</div>
<span class="col col-67">
<h3>{{serie.descricao_ex}}</h3>
<p><span ng-if="serie.tipo_repeticao">{{serie.tipo_repeticao}}: </span><span ng-if="serie.num_repeticao">{{serie.num_repeticao}}</span></p>
<p ng-if="serie.intervalo"><span>Intervalo: </span><span>{{serie.intervalo}}s</span> <span class="info_icon" ng-click="timer()"><i class="ion-ios-timer-outline"></i></span></p>
<p>Carga: <input type="text" ng-model="serie.carga" ng-blur="salvar(serie.id_exercicio_serie,serie.carga)"/></p>
<p ng-if="serie.nota"><span>Nota: </span><span>{{serie.nota}}</span></p>
</span>
</div>
</div>
</div>
</div>
Thank you
I am unable to do this thing, getting a lot of errors how can I check ng-switch containing the value is not null and the in ng-switch-when compare two values and the load the partials.
View file
<div ng-switch="{{snl}} !='' ">
<div ng-switch-when="{{sln}}=='admincat' " ng-include src="'/eve/public_html/partials/admincat.html'"></div>
<div ng-switch-default ng-include src="'/eve/public_html/partials/adminuser.html'"></div>
</div>
Controllers
$scope.grFunc = function (sidebar) {
$scope.sln = sidebar;
console.log($scope.sln);
};
<div ng-if="snl">
<div ng-switch="snl">
<div ng-switch-when="admincat">test</div>
<div ng-switch-default>test2</div>
</div>
</div>
Fiddle: https://jsfiddle.net/Lteftb0s/
Change the ng-init to test!
Try this...
<div class="content" ng-switch on="snl">
<div ng-switch-when="admincat">
<div ng-include="'template1.html'"></div>
</div>
<div ng-switch-default>
<div ng-include="'template2.html'"></div>
</div>
</div>
I am trying to implement a Kendo Tab Strip and that applies ui-router to display the contents of the tab. I can get the tab strip to display but not the contents using the ui-view. Anyone have an example of how to make these items work together.
Sample of my html.
<div class="main-template">
<div class="row">
<h3>Welcome to the Dashboard</h3>
<div ng-controller="Navigation">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active" url="#/invoice">Invoice Management</li>
<li url="#/shipment">Shipment Management</li>
</ul>
</div>
<div ui-view></div>
</div>
</div>
</div>
I was not merging everything together as I should. In the li markup I should have used ui-sref instead of url.
<div class="main-template" style="margin-left: 10px;">
<div class="row">
<h3>Welcome to the Dashboard</h3>
<!--<a ui-sref="invoice">Invoice</a>
<div ui-view></div>-->
<div ng-controller="Navigation">
<div kendo-tab-strip="tabs">
<!-- tab list -->
<ul>
<li class="k-state-active" ui-sref="invoice">Invoice Management</li>
<li ui-sref="shipment">Shipment Management</li>
</ul>
</div>
<div ui-view></div>
</div>
</div>
</div>
I am trying to have a single-page Angular-App which has a view in the middle and tools like sidebar and topbar around that. But when the user is not logged in, the view should show a login partial and the side- and topbar should be hidden. As well as there should be a fullscreen background image. I got a working attempt, but it's rather ugly, so I wonder how I could do better:
<body ng-app ="MB">
<div ng-controller="mbMainCtrl as mainCtrl" class="container-fluid">
<!--fullscreen background when not logged in-->
<div ng-hide="$root.loggedIn" class="landing" ng-cloak>
</div>
<div>
<div ng-show="$root.loggedIn" class="row">
<mb-topbar></mb-topbar>
</div>
<div class="row">
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<mb-sidebar></mb-sidebar>
</div>
<!--view always visible, loads the login page as well-->
<div class = "col-sm-6">
<div ng-view></div>
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<div class="row">
<div mb-news-feed-dir></div>
</div>
<div class="row">
<div mb-quest-feed-dir></div>
</div>
</div>
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
</div>
</div>
</div>
...
</body>
I suggest you use ui-router and have a nested view to accomplish something like this in a more clean way without having to hide and show dom elements.