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?
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 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
Seems like modals in Angular UI is difficult to update, previously in Bootstrap I could update via jQuery but in Angular UI, not able to do even a simple update.
I have <span id="spnApproveSelectedCount">0</span> inside my modal-body, and I update it using jQuery $('#spnApproveSelectedCount').text(selectedCount); like this. It was working in Bootstrap but not in Angular UI.
Even update from $scope is not working if that variable is inside the modal. But if I moved them outside of modal it is working. I suspect it is because the modal is not display yet?
Updated:
I have a repeat in which the each item is clickable. When user clicked on it, it's supposed to open up the modal with further info. Below are my codes.
<div class="list-group">
<div ng-repeat="approval in approvals" class="list-group-item">
<div class="row">
<div class="selectable" style="float: left; width: 95%" ui-turn-on="detailsModal" ng-click="SetDetails(approval)">
<p class="list-group-item-text"><b>Ref</b> <span>{{ approval.ref }}</span></p>
<p class="list-group-item-text"><b>Pay To</b> <span>{{ approval.payTo }}</span></p>
<p class="list-group-item-text"><b>From</b> <span>{{ approval.from }}</span></p>
</div>
</div>
</div>
</div>
Notice that I have the ng-click on the row and below are my codes at controller.
$scope.SetDetails = function(current)
{
$scope.details = current;
}
And also partial of my modal code..
<div class="modal" ui-if="detailsModal" ui-state='detailsModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" ui-turn-off="detailsModal">×</button>
<h4 class="modal-title">Transaction Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-5">
Type
</div>
<div class="col-sm-7">
<b>{{ details.category }}</b>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-5">
Submitted By
</div>
<div class="col-sm-7">
<b>{{ details.submittedBy }}</b>
</div>
</div>
Before everything, in fact in my controller I have a line of code to pre-set the details variable to take the first element (before it is passed to ng-repeat), this works and when the modal open, it is showing the first element value and that's it, the value stays there even if I click on row 2, 3 ...
$scope.details = $scope.approvals[0];
I see during load that the scope element $scope.docDetails has the necessary data.
In the view when I use the ng-repeat to print info, I see that it is not displayed in browser.
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in documentUploadController.docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
WHen i view the HTML ,i see the ng-repeat code being commented out
Where am I going wrong?
Currently, your ng-repeat variable is $scope.docDetails
Since $scope already equals the controller, remove the controller reference in ng-repeat like <div ng-repeat="row in docDetails">
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
I am using bootstrap's offsets in my layout, and have a simple conditional that places the offset on every 5th element.
class="col-md-2 col-sm-2 col-xs-5 ng-class:{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}"
I also made a directive that shows a little red box on hover, allowing a user to delete their element. Works fine, except that the layout won't refresh and the offsets get set on the wrong elements, making a big mess of the layout.
I tried doing scope.$apply(), but this didn't help. How can I accomplish this?
my html:
<body ng-controller="MyController">
<div class="container">
<div class="row">
<div ng-repeat="image in images"
dg-deletable=""
class="col-md-2 col-sm-2 col-xs-5 ng-class:{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}">
<div class="imagebox">
<div>{{image.name}}</div>
<div class="imagecover"></div>
<img width="140" src="{{image.file}}" />
</div>
</div>
</div>
</div>
</body>
inside my directive:
delete_btn.on('click', function(event) {
scope.$apply(function() {
element.remove();
});
});
http://plnkr.co/edit/2ADoSYwPuh46Zh5ylmjw?p=preview
(you'll need to view in fullpage mode)
Your are right #dgig. !($index % 5) works fine. The problem is that you should delete the image from the array too.
I have changed the plunker
I think the code could be written better using angular. You can use angular directives to fire events and set the style-sheet.
delete_btn.on('click', function(event) {
scope.$apply(function() {
angular.forEach(scope.images, function(img){
if(img.name == attr.imagename){
scope.images.splice(scope.images.indexOf(img),1);
}
});
element.remove();
});
});
I set the imagename as an attribute to be used in delete function.
<body ng-controller="MyController">
<div class="container">
<div class="row">
<div ng-repeat="image in images" dg-deletable="" imagename={{image.name}} class="col-md-2 col-sm-2 col-xs-5 ng-class:{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}">
<div class="imagebox">
<div>{{image.name}}</div>
<div class="imagecover"></div>
<img width="140" src="{{image.file}}" />
</div>
</div>
</div>
</div>
</body>
ng-class needs to be its own HTML attribute, like so
<body ng-controller="MyController">
<div class="container">
<div class="row">
<div ng-repeat="image in images"
dg-deletable=""
class="col-md-2 col-sm-2 col-xs-5" ng-class="{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}">
<div class="imagebox">
<div>{{image.name}}</div>
<div class="imagecover"></div>
<img width="140" src="{{image.file}}" />
</div>
</div>
</div>
</div>
</body>
It is a very simple problem about data binding procily of angularjs, refer my another answer and explanation
You just need to use obj.images to bind images data, but not using images directly.