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
Related
I am trying use ng-animate so far without success. I animate different part of my program and everything is working fine. But in this part I don't know what directive I shout use. I tried #singleQuestionAnswer.ng-enter .. ng-leave but didn't work.
<div class="row" id="singleQuestionAnswer">
<div class="column" >
<h3>$ctrl.quizQuestions[$ctrl.activeQuestion].question}}</h3>
<div class="row">
<div layout="column" ng-repeat="answer in $ctrl.answers">
<div class="answer" layout-padding>
<md-checkbox ng-checked="$ctrl.existAnswer(answer, $ctrl.answersSelected)" >
{{answer}}
</md-checkbox>
</div>
</div>
</div>
</div>
</div>
<md-button ng-click="$ctrl.answered($ctrl.active)" >Submit answer</md-button>
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 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'm trying to pass the id of the object via ui-sref directive to no avail.
My markup:
<div class="row" ui-gmap-google-map
center="map.center"
zoom="map.zoom"
options="map.options"
control="map.control"
events="map.events">
<div ui-gmap-markers models="events" coords="'location'" idkey="'_id'">
<div ui-gmap-windows show="showInfo" ng-cloak>
<div class="text-center" style="position: relative" ui-sref="event.view({id: this._id})">
<h5 ng-non-bindable>{{::name}}</h5>
<div ng-non-bindable>
<img style="width: 125px" src="{{::pictures[0]}}" alt="Image not available">
</div>
</div>
</div>
</div>
Everything is working via data binding. When clicking the window area the route changes but the id parameter is always empty in $stateParams.
How do I fix this?
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.