I have a 'deep' json result which I have to display in an AngularJS partial.
I want to display some attributes of the 'person' node. I have a single result, with only one person.
Actually, this is what I'm doing :
Name : {{country.state.town.city.street.houseNumber.person.name}}
FirstName : {{country.state.town.city.street.houseNumber.person.firstName}}
dob : {{country.state.town.city.street.houseNumber.person.dob}}
Phone : {{country.state.town.city.street.houseNumber.person.Phone}}
What I would like to do is :
var person = country.state.town.city.street.houseNumber.person
Name : {{person.name}}
FirstName : {{person.firstName}}
dob : {{person.dob}}
Phone : {{person.Phone}}
Because a partial is a html file with some ng* elements, and I don't want to hack JS within this file, how could I 'create' a local variable ?
Like NuclearGhost says, probably better to do in the controller if you have that option.
If it's a promise, then, in the controller, you can do this:
$scope.country.then(function(country) {
$scope.person = country.state.town.city.street.houseNumber.person;
});
If you can't do it in the controller, maybe this:
<div ng-repeat="person in [country.state.town.city.street.houseNumber.person]">
Name : {{person.name}}
FirstName : {{person.firstName}}
dob : {{person.dob}}
Phone : {{person.Phone}}
</div>
Related
I have a translation label with parameters and html :
{
"myLabel": "There is <b>{{param}}</b> value."
}
I don't arrive to pass my parameter and to get the HTML interpreted. I try many option :
Option 1 : Use ng-bind-html with translate filter
<p ng-bind-html="{{'myLabel' | translate:{param: vm.myParam} }}"></p>
But I get this error :
angular.js:14642 Error: [$parse:syntax] http://errors.angularjs.org/1.6.5/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7B'general.help.notion.text3'%20%7C%20translate%3A%7BnbButton%3A%20vm.nbBtn%7D%20%7D%7D&p4=%7B'general.help.notion.text3'%20%7C%20translate%3A%7BnbButton%3A%20vm.nbBtn%7D%20%7D%7D
at angular.js:88
at r.throwError (angular.js:15200)
at r.object (angular.js:15189)
at r.primary (angular.js:15078)
at r.unary (angular.js:15066)
at r.multiplicative (angular.js:15053)
at r.additive (angular.js:15044)
at relational (angular.js:15035)
at r.equality (angular.js:15026)
at r.logicalAND (angular.js:15018) "<b ng-bind-html="{{'general.help.notion.text3' | translate:{nbButton: vm.nbBtn} }}">"
Is there a way to use ng-bind-html with a parameter ?
Option 2 : Use translate directive
<p translate="myLabel" translate-values="{'param': vm.myParam}"> </p>
But what I get is for example : There is <b>2</b> value.
My current sanitize strategy for angular translate is escaped, I tried with sanitize but in french all my accent are converted into their html code, for example : Déroulement d'un chapitre
I also try the escapeParameters and sanitizeParameters strategies and always I get : There is <b>2</b> value.
Do you know how I can achieve that ?
Thanks in advance
Takeshi
Try something like this:
<p ng-bind-html="'myLabel' | translate"></p>
Remember to include $sce service.
You could use the $translate service in order to get the string translated in the controller (providing the param as parameter), then set the translated value to a var and bind (ng-bind-html) this var in the view.
Something like this (I did not use the controllerAs syntax for brevity):
controller js
$scope.message = "About to be translated..."
$translate('myLabel', {param: 1}).then(function (text) {
$scope.message = $sce.trustAsHtml(text);
}, function (textID) {
$scope.message = $sce.trustAsHtml(text);
});
view
<p ng-bind-html="message"></p>
Working Plunker
Remember to inject the $sce service.
In React, I would have just done something like
<h1>{this.props.photos ? this.props.photos.category : 'Explore'}</h1>
How can I achieve the same in angular?
When I try something like this in my controller, I get category is not defined.
$scope.photos.category = $scope.photos ? $scope.photos.category : 'Explore';
If $scope.photos is undefined, you cannot assign value to $scope.photos.category, for that photos need to be defined.
However if you want to show category you could do:
$scope.category = $scope.photos ? $scope.photos.category : 'Explore';
and then used:
<h1>{{category}}</h1>
I have a service like below
var places = [
{ "city" : "Bangalore","country-name": "India"},
{ "city" : "Mysore","country-name": "India"}
];
this.getCities = function(){
return places;
};
I am calling the getCities in my controller and displaying the data in my html like below.
<li ng-repeat="place in places">
<label>City : {{place.city}}</label>
<label>Country : {{place.country-name}}</label>
</li>
But the country name is coming as 0 and the city is working fine.
Please find the plunker here
Please let me know why it is happening
Rename country-name to countryName. You can't have dashes in your property names and then access them with the dot operator.
If for some reason you're consuming an api that you don't control, you can do this instead:
<label>Country : {{place['country-name']}}</label>
I just get stuck with my code when I am trying to make a filter for my ng repeat div element
I am trying to use one input
<input type="text" class="search_input" ng-model="search">
But in filter I would like to use that search parameter for username and user id.
<div ng-repeat="customer in userList | filter : {customer.username : search, customer.user_id : search}">
So it should show me te correct user with that username or ID what I put to input. How to make it? I am new in angular and I couldn't find for it till now some answers.
You can use a custom filter, take a look at this answer for further information:
AngularJS filter on multiple values of one field
I would comment this, but my rep is too low
create a function in your controller which will return you true/false depending upon your filter criteria :
$scope.fnFilter = function(customer){
return customer.username === $scope.search || customer.user_id === $scope.search;
};
use it in your html as :
<div ng-repeat="customer in userList | filter : fnFilter">
I have a list of items and I want to show them in a table and I have a button and whenever a user click on that the array would be updated and the table should update after that.
Here is a codes link of my code :
link to code
here is my code as well:
var app=angular.module('app',[]);
app.controller('table',function($scope){
alert("ddd");
$scope.typesHash=[{name : 'sugar', price : 1,unit:1 },
{name : 'lemon', price : 100,unit:2.5 }];
$scope.addTable=function(){
var arr={name : 'meat', price : 200,unit:3.3 };
$scope.typesHash.add(arr);
}
});
When the code loads for the first time table gets updated but when I click on the button nothing happens!!!
Can anyone help how I can do that?
You need to actually call the function clickTable, your expression was incorrect. AND you need to remove the extra controller:
<div id="clcikbtn" style="background-color:black;width:20px;height:20px;" ng-click="addTable" ng-controller="table"></div>
Should be:
<div id="clcikbtn" style="background-color:black;width:20px;height:20px;" ng-click="addTable()"></div>
Finally, change 'add' to 'push' in addTable function:
$scope.typesHash.push(arr);
Updated plunkr:
http://plnkr.co/edit/un81F5wpnvHr6zNtlFzL?p=preview