I have a JSON data which is something like:
$scope.user = {
is_session_id: true,
session_id: 'asdasdadssa',
email : 'abc#gmail.com'
}
Now, I want to assign session_id when 'is_session_by' is true, and email when is_session_by is false\null. The value is to be assigned to id of a div
<div id="{{ user.is_session_id}} ? {{ user.session_id }} : {{ user.email }} " ></div>
I am making some silly mistake. please help
Its coming out like this when checked via "Inspect element":
<li ng-click="selectUser(user,$index)"
class="left clearfix ng-scope selected"
ng-class="{selected: selected_user.email === user.email}"
ng-repeat="user in user_list"
id="true ? asdasdadssa : abc#gmail.com">
SOMETHING
</li>
This is the code you need.
<div ng-attr-id="{{ user.is_session_by ? user.session_id : user.email }}" ></div>
You could use ng-attr-id which parses your expression :
<div ng-attr-id="{{ user.is_session_id ? user.session_id : user.email }} " ></div>
use ng-attr-id t assign id with condition
<div ng-attr-id="{{ user.is_session_id ? user.session_id : user.email }} " ></div>
This is simple and recommended for your problem
<div ng-attr-id="{{ user.session_id || user.email }} " ></div>
No need a extra variable user.isSession_id
Why you need this way if simple one is there.
In the controller :
var user = {
is_session_by: true,
session_id: 'asdasdadssa',
email : 'abc#gmail.com'
}
$scope.result = user.is_session_by ? user.session_id : user.email
In the html :
<div id="{{result}}" >{{result}}</div>
Related
error
supporting object 'Active' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
I was trying to make it where every time i click the toggle it will change the {{ setting }} from Inactive to active. was trying to get this method working if the other one fails to be possible.
code html:
<ion-item>
<ion-label>Front Door</ion-label>
<ion-toggle [(ngModel)]="fdoor" ng-model="ni_toggle" (ionChange)="Fdoor()" (click)="change()"></ion-toggle>
</ion-item>
<div *ngFor="let setting of sett">
{{ setting }}
</div>
ts:
active: string = "Active"
inactive: string = "Inactive"
change() {
if(this.fdoor = true) {
this.sett = this.active
}
}
I don't know what is your purpose. But I think you should do like this:
sett = false;
change() {
if(this.fdoor = true) {
this.sett = !this.sett;
}
}
HTML
<ion-item>
<ion-label>Front Door</ion-label>
<ion-toggle [(ngModel)]="fdoor" ng-model="ni_toggle" (ionChange)="Fdoor()" (click)="change()"></ion-toggle>
</ion-item>
<div>
{{ sett ? "Active" : "Inactive" }}
</div>
I am trying to bind a dropdown list from JSON string attach below but my last value of JSON is getting override with all values . I have tried to console and I have received individual values in console but while binding i m unable to do it. I have used select option and different select ng-change option but still stuck. Please help me as you can.
My html Code :
<ion-list>
<div ng-repeat="group in groups">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
{{group.name}}
</ion-item>
<ion-item class="item-accordion item-button-right" ng-repeat="item in group.items track by $id(item)" ng-show="isGroupShown(group)" style="height: 50px;">
{{item.name}}
<select> <option selected>Select</option>
<option ng-repeat="itm in qty track by qty.id" value="{{itm.id}}">{{itm.price}}</option>
</select>
</ion-item> </div>
</ion-list>
JSOn String :
"category_name":{
"1":{
"menu_category_id":"1",
"category_name":"Beverage Black Coffee",
"itemname":{
"1":{
"menu_item_id":"1",
"item_name":"Frespresso",
"qty":{
"50.00":{
"full":"50.00",
"half":null,
"quater":null
}
}
},
Controller code :
var i =0;
angular.forEach(response.data.category_name, function(menu,key){
$scope.groups[i] = {
name: menu.category_name,
items: [],
qty:[],
rate:[],
show: false
};
angular.forEach(menu.itemname, function(itemid,key){
$scope.groups[i].items.push({id:itemid.menu_item_id,name:itemid.item_name});
angular.forEach(itemid.qty, function(qty,key){
if(qty.fullqty!==null){
$scope.groups[i].qty.push({type:'full',qty:qty.full});
console.log("full : "+itemid.full +" Item Id "+itemid.menu_item_id);
console.log(qty.item_name + " fullqty " + qty.full_qty + " fullrate "+ qtyu.full_rate);
}
});
});
i++;
});
} else{
$ionicLoading.hide();
msg = [];
msg.push("- Something went Wrong!!! <br />");
msg.push("- Plz try again! <br />");
var alertPopup = $ionicPopup.alert({
title: 'OOPS!!!',
template: msg
});
}
}).error(function(error) {
console.log("Server error: " + error);
});
});
solved this I was foolish to form another array which is running out of sync that's why it was not binding properly so bind it to $scope.groups[i].items.push({id:itemid.menu_item_id,name:itemid.item_name}); instead of forming one more foreach
I define a collection of language objects like this:
$scope.languages = [
{'name':'English', value:'english', 'checked':true, 'available': true},
{'name':'German', value:'german', 'checked':false, 'available': true},
{'name':'Spanish', value:'spanish', 'checked':true, 'available': true}
];
Then I display them in checkboxes like this:
<div class="form-group">
<label for="description">Languages</label>
<div class="checkbox" data-ng-repeat="language in languages">
<label><input type="checkbox" ng-model="language.checked">{{language.name}}</label>
</div>
</div>
And as they are checked on and off, I display a list of them like this:
<div class="dataRow">
<div class="dataLabel">Languages:</div>
<div class="dataValue text-success" data-ng-repeat="language in languages">
<span ng-if="language.checked">{{language.name + ($last ? '' : ',')}}</span>
</div>
<div class="clear"></div>
</div>
And as long as the last language is selected, then the final comma will not be shown. But if the last language (Spanish) is not selected, then the final comma is erroneously shown.
Instead of $last I need something like $last(isChecked). How do I do that?
You could iterate only over the checked items by adding a filter in your ng-repeat like this:
<div class="dataRow">
<div class="dataLabel">Languages:</div>
<div class="dataValue text-success" data-ng-repeat="language in languages | filter: {checked: true}">
{{language.name + ($last ? '' : ',')}}
</div>
<div class="clear"></div>
</div>
That way you know the last element is checked.
Here's a working fiddle http://jsfiddle.net/q7ch1ysh/
Just specify that in the ternary:
language.name + ($last && language.checked ? '' : ',')
try this:
<div class="dataValue text-success" data-ng-repeat="language in languages track by $index">
<span ng-if="language.checked">{{language.name + (($index==languages.length && language.checked) ? '' : ',')}}</span>
</div>
I have this html :
<div class="{{ article.contributor }}" ng-repeat="article in articles">
Which gave me this :
<div class="["harry", "eddy", "john"]">
But I want this :
<div class="harry eddy john">
What is the best way to do this ?
Thank you very much
Try joining the array, like this:
<div class="{{ article.contributor.join(' ') }}" ng-repeat="article in articles">
Ohhh the choices... joyous choices.
Quick and dirty...
<div class="{{ typeof article.contributors === 'array' ? article.contributors.join(' ') : article.contributors }}" ng-repeat="article in articles"></div>
As a filter...
myAppname.module.filter('spaceSeperatedValues', function() {
return function(data){
//handles if just a string (e.g., 'John')
return data === 'array' ? data.join(' ') : data;
}
}
<div class="{{ article.contributors | spaceSeperatedValues }}" ng-repeat="article in articles"></div>
As a controller function..
app.module.controller('ArticleController', ['$scope'], function ($scope) {
$scope.articles = [{ text : 'my article text', contributors : ['harry', 'eddy', 'john'] }]
$scope.spaceSeperatedValues = function(data) {
//handles if just a string (e.g., 'John')
return data === 'array' ? data.join(' ') : data;
}
}
<div ng-controller="ArticleController">
<div class="{{ spaceSeperatedValues(article.contributors) }}" ng-repeat="article in articles"></div>
</div>
Have not checked this code in a debugger... <-- disclaimer. :D
I would like to do the following:
<div>
<div ng-repeat="row in test.active">
<div>{{ row.id }}</div>
<div>
{{ if (row.testTypeId == 1) { test.exams.dataMap[row.examId].name; } }}
{{ if (row.testTypeId == 2) { test.topics.topicNameMap[row.topicId] } }}
</div>
</div>
</div>
However this is giving me an error with the { inside of the {{ }}. Is there another way I could make this work?
#jack.the.ripper is correct. Move the logic to a function in the $scope and call that instead.
$scope.name = function (row) {
if (row.testTypeId == 1) {
return test.exams.dataMap[row.examId].name;
} else {
return '';
}
}
In the HTML:
{{ name(row) }}
Ternary operators certainly work, plnkr.
{{ (row.testTypeId == 1) ? test.exams.dataMap[row.examId].name : '' }}
{{ (row.testTypeId == 2) ? test.topics.topicNameMap[row.topicId] : '' }}
You can use ng-show to do this:
<div>
<div ng-repeat="row in test.active">
<div>{{ row.id }}</div>
<div ng-show="row.testTypeId == 1">
{{test.exams.dataMap[row.examId].name }}
</div>
<div ng-show="row.testTypeId == 2">
{{ test.topics.topicNameMap[row.topicId] }}
</div>
</div>
</div>
Why does it need to be in the databinding itself? Couldn't you just use the ng-if directive?
<div ng-if="row.testTypeId == 1">stuff</div>
<div ng-if="row.testTypeId == 2">otherstuff</div>