I use the following code snippet to list an array of objects in html document
, it shows the list of link accurately ...
<div ng-repeat="item in List">
<a ng-click="Show('{{item.name}}');"> ShowName </a>
</div>
it outputs the following html code:
<a ng-click="Show('name1')">ShowName</a>
.
.
.
<a ng-click="Show('//upto nth name')">ShowName</a>
Here is my angular code :
$scope.Show=
function(getName)
{
alert(getName);
}
but when I click on any link it shows "{{item.name}}" instead of showing "name1" or respective name in the alertbox...
I also tried
Show('{{item.name}}');
but the result is same...
what I am doing wrong????
You are not supposed to use {{}} inside an Angular directive. Your code should be like this:
<div ng-repeat="item in List">
<a ng-click="Show(item.name)"> ShowName </a>
</div>
You can either use following style
<li ng-repeat="item in List">
{{item.name}}
</li>
here $index represent index of your array. i prefer to use this because here you can access full object.then just do what you want.
$scope.clickit = function(x) {
console.log($scope.List[x])
}
if you don't like the above style you can use the below style
<li ng-repeat="item in List">
{{item.name}}
</li>
The problem here is that you are using ' and {} when passing the variable as an argument to the function.
Change
<a ng-click="Show('{{item.name}}');"> ShowName </a>
to
<a ng-click="Show(item.name);"> ShowName </a>
Related
I'm using angular 1.4.5 with django v1.8 app, and trying to implement new layout for my website.
Here is my view:
<div class="page animsition" ng-app="AppUI">
<div class="page-content padding-30 blue-grey-500"
ng-controller="DisplayManageController">
<ul>
<li ng-repeat="feed in items">
<a>{{ feed.type }}</a>
<img ng-src="feed.obj.image"/>
<em ng-bind="feed.obj.text"></em>
</li>
</ul>
</div>
</div>
And the angular controller code:
var AppUI = angular.module('AppUI');
AppUI.controller('DisplayManageController', ['$scope', 'display', function ($scope, display) {
$scope._display = display.items({'id': 71});
$scope.items = [];
$scope._display.$promise.then(function (result) {
angular.forEach(result, function (value) {
$scope.items.push(value);
});
});
}]);
And html result after promise updates
<li ng-repeat="feed in items" class="ng-scope">
<a></a>
<img ng-src="feed.obj.image" src="feed.obj.image">
<em ng-bind="feed.obj.text" class="ng-binding">Blabla #somehashtagfromme</em>
</li>
Here is the content of "items"
[
{$$hashKey:"object:3",group_id: 1,id: "562a1a48942fbd0d9016617e",obj:{image:"https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12080420_855923527854550_1926591603_n.jpg",text:"Nefesler tutuldu"},type:"instagram"},
{$$hashKey:"object:2",group_id: 1,id: "5627a75e942fbd0d7ed19748",obj:{image:"https://pbs.twimg.com/media/CR2VePxUwAAVqtn.jpg", text:"bu zamanların ruhu"},type:"twitter"},
...
]
ng-repeat repeats all items as feed objects, but why curly braces and ng-src doesn't compile or returns empty values ?
Ps: I also tried ng-src={{feed.obj.text}} but result doesn't change ..
It should be ng-src="{{feed.obj.text}}". That's quotes and double curly brackets.
If that doesn't work, paste <pre>{{feed.obj | json}}</pre> after the </a> and before the <img>. That will let you see problems with the object.
Also, since you're using Django make sure your rendering the template raw. Otherwise django will think that the double curly brackets are django templates.
Here is a plunker of your code working:
http://plnkr.co/edit/khgxkLt2FjskrguWP5Js?p=preview
You do need curly braces around items being interpolated.
<ul>
<li ng-repeat="feed in items">
<a>{{ feed.type }}</a>
<img ng-src="{{feed.obj.image}}"/>
<em ng-bind="{{feed.obj.text}}"></em>
</li>
</ul>
There is a list of items which is displayed using ng-repeat. Each item is associated with a hide link. The intent is to hide an item if its corresponding hide link is clicked.
view:
<div ng-repeat="item in products">
<div>{{ item }}</div>
<a href"javascript:void(0)" ng-click="hideMe(item)">[delete]</label>
</div>
How could I implement the function hideMe(item) such a way that it could hide item div element, something like following, ng-if could identify when to hide based on the click event -
<div ng-if="...">{{ item }}</div>
For every list-item, you want to hide it if it's clicked. The best way we can do this is by adding the ng-hide directive.
Using the ng-click directive on a button, we can set the hidden property of an item to true, meaning it should be hidden.
<ul>
<li ng-repeat="fruit in fruits" ng-hide="fruit.hidden">
<p>{{fruit.name}}</p>
<button ng-click="hideMe(fruit)">hide li</button>
</li>
</ul>
$scope.hideMe = function (fruit) {
fruit.hidden=true;
alert('hide this li');
};
Here is a fiddle
http://jsfiddle.net/5yh8bxay/1/
You could use an array of objects like this: $scope.products = [{name: 'hello', status: true}]
And then you can hide them changing the status property:
<div ng-repeat="item in products">
<div ng-show="item.status">
{{ item.name }} <a href"javascript:void(0)" ng-click="item.status = false">[delete]</label>
</div>
</div>
JSFiddle
You can use $index to do that.
Something like this.
<div ng-repeat="item in products">
<div ng-hide="selected.index === $index">{{ item }}</div>
<a href"javascript:void(0)" ng-click="selected.index = $index">[delete]</label>
</div>
Just store the selected value when clicked and use-hide you can use ng-class to hide the item, comparing them to the selected index.
I have two tabs and have to implement filtering on both of them.
In second tab everything works fine, but in first one not.
I'm filling that problem relates to this part(ng-model):
<ul search-list=".letter" model="search.district">
<li class="letter" ng-repeat="letter in alphabet.letter">{{ letter }}</li>
</ul>
and to this:
<input id="q" type="text" ng-model="search.district " />
So second tab works fine:
<div ng-repeat="district in districts | filter:search:startsWith" class="district">
<h4 class="district-name">{{ district.district }}</h4>
Some info
<ul class="district-cities">
<li ng-repeat="city in district.cities ">
<a href="{{ city.url }}">
{{ city.name }}
</a>
</li>
</ul>
</div>
But how to make works first part I don't know...
Here is DEMO
Do this changes in HTML
<div class="tab-content active" data-id="first">
<li ng-repeat='city in cities | filter:{name :search.district}:startsWith'>
<a href="{{ city.link }}">
{{ city.name }}
</a>
</li>
</div>
Here is the updatd Plunker
In your startsWith method you are specifically referencing the district property of the object. This property doesn't exist on city objects:
$scope.startsWith = function (actual, expected) {
var lowerStr = (actual + "").toLowerCase();
var e = angular.isString(expected) ? expected.toLowerCase() :
// district is not present in City object
expected.district.toLowerCase();
return lowerStr.indexOf(e) === 0;
}
Since you're using search.district, it tries to access the .district value for the cities.
You can use search.name instead, here...
<ul search-list=".letter" model="search.name">
...and here...
<input id="q" type="text" ng-model="search.name" />
and then rename district to name on each district of the district array.
How do I dynamically bind the response data to the html generated inside ng-repeat?
Currently, only socialCount is being bound for all li's.
Here's my html:
<li ng-repeat="category in inbox.categories track by $index">
<a href="#">
<div class="left-row" ng-click="inbox.showView(category)" target="_self">
<div class="leftcolumn1"><span class="glyphicon glyphicon-user"></span></div>
<div class="leftcolumn2">{{category}}</div>
<div class="leftcolumn3 email-time" ng-bind="inbox.messageCounts.socialCount"></div>
</div>
</a>
</li>
and the response I get from the server is this:
{"socialCount":431,"promotionsCount":17843,"updatesCount":26997,"forumsCount":1780}
The js function:
Inbox.prototype.getMessageCounts = function(categories){
$http.get(
this.messageCountUrl + this.userGuid).success(function(data){
this.messageCounts=data;
}.bind(this));
Found the answer, just have to do this.
<div class="leftcolumn3 email-time" ng-bind="inbox.messageCounts.{{category|lowercase}}Count"></div>
I'm trying to apply a background image to a div by using the angular ng-style ( I tried a custom directive before with the same behaviour ), but it doesn't seem to be working.
<nav
class="navigation-grid-container"
data-ng-class="{ bigger: isNavActive == true }"
data-ng-controller="NavigationCtrl"
data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true"
data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false"
data-ng-show="$parent.navInvisible == false"
data-ng-animate="'fade'"
ng-cloak>
<ul class="navigation-container unstyled clearfix">
<li
class="navigation-item-container"
data-ng-repeat="(key, item) in navigation"
data-ng-class="{ small: $parent.isNavActive, big: isActive == true }"
data-ng-mouseenter="isActive = true; isInactive= false"
data-ng-mouseleave="isActive = false; isInactive= true">
<div data-ng-switch on="item.id">
<div class="navigation-item-default" data-ng-switch-when="scandinavia">
<a class="navigation-item-overlay" data-ng-href="{{item.id}}">
<div class="navigation-item-teaser">
<span class="navigation-item-teaser-text" data-ng-class="{ small: isScandinavia }">{{item.teaser}}</span>
</div>
</a>
<span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span>
</div>
<div class="navigation-item-last" data-ng-switch-when="static">
<div class="navigation-item-overlay">
<div class="navigation-item-teaser">
<span class="navigation-item-teaser-text">
<img data-ng-src="{{item.teaser}}">
</span>
</div>
</div>
<span class="navigation-item-background">
<img class="logo" data-ng-src="{{item.images.logo}}">
</span>
</div>
<div class="navigation-item-default" data-ng-switch-default>
<a class="navigation-item-overlay" data-ng-href="{{item.id}}">
<div class="navigation-item-teaser">
<span class="navigation-item-teaser-text">{{item.teaser}}</span>
</div>
</a>
<span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span>
</div>
</div>
</li>
</ul>
</nav>
Though, if I do try a background color, it seems to be working fine. I tried a remote source and a local source too http://lorempixel.com/g/400/200/sports/, neither worked.
It is possible to parse dynamic values in a couple of way.
Interpolation with double-curly braces:
ng-style="{'background-image':'url({{myBackgroundUrl}})'}"
String concatenation:
ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}"
ES6 template literals:
ng-style="{'background-image': `url(${myBackgroundUrl})`}"
Correct syntax for background-image is:
background-image: url("path_to_image");
Correct syntax for ng-style is:
ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">
IF you have data you're waiting for the server to return (item.id) and have a construct like this:
ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}"
Make sure you add something like ng-if="item.id"
Otherwise you'll either have two requests or one faulty.
For those who are struggling to get this working with IE11
HTML
<div ng-style="getBackgroundStyle(imagepath)"></div>
JS
$scope.getBackgroundStyle = function(imagepath){
return {
'background-image':'url(' + imagepath + ')'
}
}
This worked for me, curly braces are not required.
ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}"
notification.icon here is scope variable.
If we have a dynamic value that needs to go in a css background or
background-image attribute, it can be just a bit more tricky to
specify.
Let’s say we have a getImage() function in our controller. This
function returns a string formatted similar to this:
url(icons/pen.png). If we do, the ngStyle declaration is specified the
exact same way as before:
ng-style="{ 'background-image': getImage() }"
Make sure to put quotes around the background-image key name.
Remember, this must be formatted as a valid Javascript object key.
Just for the records you can also define your object in the controller like this:
this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' };
and then you can define a function to change the property of the object directly:
this.changeBackgroundImage = function (){
this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')';
}
Doing it in that way you can modify dinamicaly your style.
The syntax is changed for Angular 2 and above:
[ngStyle]="{'background-image': 'url(path)'}"