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>
Related
Please see below code, which is running fine.
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
Its giving result in 3 separate lines without any CSS.
I want to display like tree/table with row within row.
You are closing the first row before opening the nested ones.
Try this:
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
</div>
i have this code for displaying images using slick.js.
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
</div>
and below is the output.
if i use three different divs than it works fine but not with ng-repeat.
instead it should come in a single row as originally slick js works.
Try by adding a data attribute to your declaration
Example,
<slick infinite="true" data="myArray" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div class="row">
<div ng-repeat="var in myArray" class="slick-item">
<div class="col-md-4 truckImage truck-error"></div>
</div>
</div>
</slick>
</div>
I think it will work for you, let me know if it is not working. i have just added <div class="row"> and then <div class="col-md-4 truckImage truck-error"></div>
I have an array of products. I would like to display them in rows, with 4 products per row. Right now my code is
<div ng-repeat="product in products" class="col-md-3">
<p> {{product.name}} </p>
<p> {{product.price}} </p>
</div>
However, this is not displaying properly. I have tried to incorporate rows with an ng-if, but this is as close as I've come:
<div ng-repeat="product in products">
<div ng-if="$index %4 == 0" class="row">
<div class="col-md-3">
(content)
</div>
</div>
<div ng-if="$index %4 != 0" class="col-md-3">
(content)
</div>
</div>
I think I know why the above doesn't work: if index %4 != 0then the column that is created is not actually put inside of the row made before.
Is there an angular way to do this? Do I need a custom directive? Note: I have managed a solution not using angular directives but it doesn't seem clean, so I would like to do it "angularly" if possible.
You should be able to use your first method just fine, here's the html I wired up in a js fiddle:
<div ng-app="app">
<div ng-controller="ParentCtrl">
<div class="container">
<div class="row">
<div data-ng-repeat="option in options" class="col-md-3">
{{ option }}
</div>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/ubexop9p/
You will have to play around with the frame sizes if your monitor is too small, but I was able to get it do what you wanted.
Do you have that wrapped in a container or container-fluid? I believe that's required for the grid system to work.
<div class="container">
<div class="col-md-3">Col 1</div>
<div class="col-md-3">Col 2</div>
<div class="col-md-3">Col 3</div>
<div class="col-md-3">Col 4</div>
<div class="col-md-3">Col 5</div>
</div>
Turns out it was a problem with the content I was putting inside the columns, the code I posted does in fact work.
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>
I have coded this:
.row {
display: table-row;
}
.table {
display: table;
}
<div class="table">
<div class="row">
<div class="cell">x</div>
<div class="cell">x</div>
</div>
<div data-ng-repeat="x in modal.xx">
<div class="row">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row">
<div class="cell">z</div>
<div class="cell">z</div>
</div>
</div>
</div>
However the that does the ng-repeat causes problems when it's used inside a display: table-row.
What I really need to do is to have something that will do the repeat and have only the things I want repeating show up. In this case the with ng-repeat in it appears in the dom. I did think of using something like a and putting the ng-repeat in that but I am not sure this is syntactically correct when I'm inside a that's a type of display: table.
Is there a way to do this with angular?
Sure. Assuming you're using Angular 1.2 or later, see ng-repeat-start and ng-repeat-end.
So this:
<div data-ng-repeat="x in modal.xx">
<div class="row">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row">
<div class="cell">z</div>
<div class="cell">z</div>
</div>
</div>
would become this:
<div class="row" data-ng-repeat-start="x in modal.xx">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row" data-ng-repeat-end>
<div class="cell">z</div>
<div class="cell">z</div>
</div>