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}}" />
Related
I try to upload a small angularjs app to my code pen. My question is: how to put the views?
I have two views. So they're in two separate .html files. But on code pen you have only one .html placeholder.
What I tried to do, is to put them in a tag with id, but it's doesn't work.
Here's the code:
<!-- html templates used by angular, usually in separate files -->
<script type="text/ng-template" id="albumDetails.html">
<div>
<ul>
<li ng-repeat="albumDetails in albumDetails | searchFor:searchString">
<div class="d-flex flex-row">
<div class="p-2"><img src="img/photo_album.png" class="albumIcon img-fluid" /></div>
<div class="p-2">
<p><strong>Album title:</strong> {{albumDetails.title}}</p>
<p><strong>Owner’s name:</strong> {{albumUsers[albumDetails.id].name}}</p>
<p>Number of Photos: {{ 'PhotoDetails[$index]' | lengthOfObject }} </p>
</div>
</div>
<hr />
</li>
</ul>
<!-- template for displaying a contacts info -->
<script type="text/ng-template" id="calbumList.html">
<div>
<p>Go back to home page</p>
<ul>
<li ng-repeat="PhotoDetails in PhotoDetails">
<img src="{{PhotoDetails.thumbnailUrl}}" />
<div class="modal fade photoBig{{PhotoDetails.id}}" id="modalContainer" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel{{PhotoDetails.id}}" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img src="{{PhotoDetails.url}}" />
</div>
</div>
</div>
</li>
</ul>
And here's the pen:
https://codepen.io/Menachem36/pen/eedbgb
Any idea?
Thanks
Is there is any possibility for using Multiple ng-if methods in a same div
example:
<div ng-if="condition1">
<!-- code to render -->
<div ng-if="condition2">
<!-- code to render -->
</div>
<div ng-if="condition3">
<!-- code to render -->
</div>
</div>
You can create multiple ng-if conditions
<div ng-app>
<div ng-if="true">
<!-- code to render -->
div1
<div ng-if="true">
<!-- code to render -->
div2
</div>
<div ng-if="false">
div3
<!-- code to render -->
</div>
</div>
</div>
http://codepen.io/nagasai/pen/aZpVpz
I am having a bootstrap div with 3 columns as given in the html below and when i have a select control in the first div of the row, the remaining div's don't show up. but if i comment out the same and check with hello world text. All columns show up just like it should be.
not sure what is that i am missing, hence looking out for a new set of eyes to point out what is wrong. :)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div style="text-align:center">
<h1>Wind Monitoring System </h1>
</div>
<div class="row">
<div class="col-md-4" style="background:blue">
<span>Hello World1</span>
<!--<div>
<select id="states" ng-model="selectedState" ng-change="getCities()" size="3" ng-options="state.Name for state in states" />
</div>-->
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World2</span>
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World3</span>
<!--<select id="city" ng-show="selectedState != null" ng-model="selectedCity" size="3" style="height:200px;width:200px" ng-options="city.city for city in cities | filter : {State:selectedState.Name}" />-->
</div>
</div>
</div>
If I'm not mistaken the select tags should be as such <select></select> I believe you are supposed to be binding your options not your <select> tags.
Check this link out
Okay here you go
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="app">
<div class="container-fluid">
<div style="text-align:center">
<h1>Wind Monitoring System </h1>
</div>
<div class="row">
<div class="col-md-4" style="background:blue">
<span>Hello World1</span>
<div ng-controller="Test">
<select ng-model="selectedState" size="3" ng-options="item for item in items"></select>
</div>
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World2</span>
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World3</span>
</div>
</div>
</div>
</div>
JavaScript
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.items = ['one','two','three','four']
});
I believe all I did was add the closing tag.
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.
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>