call a value in AngularJS - angularjs

I want to call a particular value in my app through AngularJS
here is my controller(js file)
//infocomnamebyid
$http.get('/csuv5.asmx/infocomname', {
params: {
id: $scope.additionalinfoparam.Id
}
})
.then(function (response) {
{
$scope.comnamebyinfo = response.data.info;
console.log(response.data.info);
}
});
}
the value is printing in console like this
[Object]
0
:
Object
comname
:
"QED Productions Pvt Ltd"
__proto__
:
Object
length
:
1
__proto__
:
Array[0]
but now I want to print the same on my label
<label></label>

Try JSON.parse()
$scope.comnamebyinfo = JSON.parse(response.data.info);
and in HTML,
<label ng-model="comnamebyinfo"></label>

Give your label a model:
<label ng-model='aName'></label>
Then you can assign a value to it in your controller:
$scope.aName = response.data.info;

There would be no reason to use two-way binding for a label. This means, instead of using the ng-model, you could:
1) String interpolation:
<label> {{ comnamebyinfo }}</label>
or 2) The ng-bind directive:
<label ng-bind="comnamebyinfo"></label>
More information about the differences between those options can be found here.

Related

ngClass Directive: Can I use multiple expressions to add multiple classes?

Here is an example of what I want to achieve
data-ng-class="{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name }"
but it doesn't work.
Use the array form for ng-class:
<div ng-class="[showTooltip ? 'tooltip_show' : '',
'tooltip__' + brand.settings.name]">
<div>
OR compute the class in JavaScript:
<div ng-class="computeClass(tooltip_show, brand.setting.name)">
</div>
$scope.computeClass(show, name) {
var obj = {};
obj.showTooltip = show;
obj['tooltip_'+name] = true;
return obj;
};
The later approach is more easily debugged and better for complex computation.
See also,
AngularJS ng-class Directive Reference - Known Issues
AngularJS Developer Guide - Why mixing interpolation and expressions is bad practice
It looks like you haven't set a value for the second item. Did you mean something like
{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name : tooltipText }
or
{ 'tooltip_show' : showTooltip , 'tooltip__' : brand.settings.name }
?
http://jsbin.com/genaqapefe/edit?html,js,output
data-ng-class="{ 'tooltip_show': showToolTip, {{ 'tooltip_' + brand.settings.name }}: true }"
This is working for me in this bin. I couldn't get it to evaluate without the curly braces, although not sure if that's the best practice.

How to bind a list of checkboxes in AngularJS

I have a list of checkboxes as following :
<div flex="50" ng-repeat="formationType in formationTypeList">
<md-checkbox class="md-warn md-align-top-left"
value="{{formationType.codeFormation}}"
name="formationSelection[]"
ng-checked="formationSelection.indexOf(formationType) > -1"
ng-click="toggleFormationTypeSelection(formationType)">
{{ formationType.nom }}
</md-checkbox>
</div>
This is the format of formationSelection after I send my form :
formationSelection = [
{
codeFormation: 1,
nom: "ENSA"
},
{
codeFormation: 2,
nom: "CPGE"
}
]
In another scenario I want when I open my form to check the checkboxes which are defined in an array as following :
$scope.formationSelection = res.candidatureProjetProfessionnel.formations;
the object res.candidatureProjetProfessionnel.formations contains this :
formationSelection = [
{
codeFormation: 1,
nom: "ENSA"
},
{
codeFormation: 2,
nom: "CPGE"
}
]
And when I inspect $scope.formationSelection it contains the data I got from res.candidatureProjetProfessionnel.formations :
But I don't know why my checkboxes are not checked even though the $scope.formationSelection is not empty.
How can I solve this ?
i'm not sure what the md-checkbox directive is so i'm just going to use a normal checkbox input. Generally speaking, setting a default value for inputs in angular involves 2 things:
Make sure your inputs have ng-model to store the value of the checkbox and for 2 way data binding (so that you can set it from the controller as well)
In your controller set the variable declared in the ng-model to whatever default value you want.
So in you html:
<input type="checkbox" class="md-warn md-align-top-left" ng-
model="formationSelection[$index]" ng-true-value="{{formationType}}"
name="formationSelection[]">
Make sure you use ng-true-value to declare the value of each checkbox when checked. The ng-model is set to formationSelection[$index] which basically means each checkbox is an item inside the formationSelection array, this way the array will be the collection of the values of all checked inputs.
Now $scope.formationSelection = res.candidatureProjetProfessionnel.formations should work
Here's a working plunker:
http://plnkr.co/edit/sGm39DRWH9EOReiiSrIl?p=preview
You have to use ng-model as shown below.It should be an object like $scope.data = {};.This is just an example where hope you can get the point and work on your scenario. Actually you're having individual check boxes as shown below but values are being set through the loop.So you can apply this concept for your use case as well.Hope this will help to you.
Html
<md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
Checkbox 1: {{ data.cb1 }}
</md-checkbox>
JS
$scope.data = {};
$scope.data.cb1 = true;
Play with it on Codepen
I think that your method isFormation(formationType) on the directive ng-checked it's not return the result.
In your controller create a function
$scope.isFormation(_type){
return $scope.formationSelection.filter(function(f){return f.nom === _type;}).length > 0;
}

Binding ng-click argument object keys to scope properties?

I'm trying to pass an object with variable keys to an ng-click method. In regular javascript you would just do this:
var x = "fork";
var obj = {};
obj[x] = "three points" //{ fork: "three points" }
Normally to send objects via ng-click you would set up an object literal as the argument.
//in controller
$scope.val = "red";
//in view
<button ng-click="click( { item: val} )"></button>
//output is { item: "red" }
But what if you want the key of the argument's object to be bound to a scope property?
//in controller
$scope.key = 29845;
//in view
<button ng-click="click( { {{key}}: 456 } )"></button>
//should output { 29845: 456 }
Trying this results in a syntax error. However, you can use this same syntax in ui.bootstrap typeahead's typeahead-on-select method and it works... I have no idea why though.
<input type="text"
typeahead="i for i in data"
typeahead-on-select="select( { {{i}}: 'something' } )"
class="typeahead" />
http://plnkr.co/edit/EfSvbP8fXBLoZhr8eWG5
How can you bind scope properties to object keys?
You can try something like this :
<button ng-click="temp={};temp[key]=456;click(temp)"></button>
See http://plnkr.co/edit/NfH3xNUXtBROiu9olHVE?p=preview.
Though it will add temp variable in the scope.

Angular filter on json object

I have a json record as country, inside country, it contains many states, I want to filter by either label or value, so the states json looks like:
$scope.states: {"s1":{"label":"Alabama","value":"Alabama"},"s2":{"label":"Alaska","value":"Alaska"},"s3":{"label":"Arizona","value":"Arizona"},"s4":{"label":"Arkansas","value":"Arkansas"},"s5":{"label":"California","value":"California"},"s6":{"label":"Colorado","value":"Colorado"},"s7":{"label":"Connecticut","value":"Connecticut"},"s8":{"label":"Delaware","value":"Delaware"},"s9":{"label":"DC","value":"DC"},"s10":{"label":"Florida","value":"Florida"},"s11":{"label":"Georgia","value":"Georgia"},"s12":{"label":"Hawaii","value":"Hawaii"},"s13":{"label":"Idaho","value":"Idaho"},"s14":{"label":"Illinois","value":"Illinois"},"s15":{"label":"Indiana","value":"Indiana"},"s16":{"label":"Iowa","value":"Iowa"},"s17":{"label":"Kansas","value":"Kansas"},"s18":{"label":"Kentucky","value":"Kentucky"},"s19":{"label":"Louisiana","value":"Louisiana"},"s20":{"label":"Maine","value":"Maine"},"s21":{"label":"Maryland","value":"Maryland"},"s22":{"label":"Massachusetts","value":"Massachusetts"},"s23":{"label":"Michigan","value":"Michigan"},"s24":{"label":"Minnesota","value":"Minnesota"},"s25":{"label":"Mississippi","value":"Mississippi"},"s26":{"label":"Missouri","value":"Missouri"},"s27":{"label":"Montana","value":"Montana"},"s28":{"label":"Nebraska","value":"Nebraska"},"s29":{"label":"Nevada","value":"Nevada"},"s30":{"label":"New Hamshire","value":"New Hamshire"},"s31":{"label":"New Jersey","value":"New Jersey"},"s32":{"label":"New Mexico","value":"New Mexico"},"s33":{"label":"New York","value":"New York"},"s34":{"label":"North Carolina","value":"North Carolina"},"s35":{"label":"North Dakota","value":"North Dakota"},"s36":{"label":"Ohio","value":"Ohio"},"s37":{"label":"Oklahoma","value":"Oklahoma"},"s38":{"label":"Oregon","value":"Oregon"},"s39":{"label":"Pennsylvania","value":"Pennsylvania"},"s40":{"label":"Puerto Rico","value":"Puerto Rico"},"s41":{"label":"Rhode Island","value":"Rhode Island"},"s42":{"label":"South Carolina","value":"South Carolina"},"s43":{"label":"South Dakota","value":"South Dakota"},"s44":{"label":"Tennessee","value":"Tennessee"},"s45":{"label":"Texas","value":"Texas"},"s46":{"label":"Utah","value":"Utah"},"s47":{"label":"Vermont","value":"Vermont"},"s48":{"label":"Virgin Islands","value":"Virgin Islands"},"s49":{"label":"Virginia","value":"Virginia"},"s50":{"label":"Washington","value":"Washington"},"s51":{"label":"West Virginia","value":"West Virginia"},"s52":{"label":"Wisconsin","value":"Wisconsin"},"s53":{"label":"Wyoming","value":"Wyoming"}}
the code for the page is:
<label class="item item-input">
<input type="text" placeholder="请输入你要寻找的省市" ng-model="searchText.$"/>
</label>
<ion-radio ng-model="create.state" ng-repeat="s in states | filter:searchText)" ng-value="s">{{s.label}}</ion-radio>
this does not work, I also tried custom filter based on another post: filter on nested objects, does not work for me
mention which field are you trying to put a filter on
filter:{'label': searchText} and ng-model="searchText" would suffice.
As you are trying to iterate over the object properties you can define a custom filter as follows .Here is the working example
.filter('customFil', function () {
return function (p, query) {
var obj = {};
for (var key in p) {
if (p.hasOwnProperty(key)) {
if (p[key].label.includes(query)) {
obj[key] = p[key];
}
}
}
return obj;
}
});

How to access an attribute in a template, besides by its name?

In an underscore template, is there any other way to access an attribute besides by its name? I've got one called "2a" and I cannot reference it directly, due to its first character being a number. For example, this doesn't work:
<input type="checkbox" name="6a" <%= 6a ? "checked" : "" %>>
Thanks!
You have a few options other than renaming the offending attribute.
Underscore's _.template has a variable option:
By default, template places the values from your data in the local scope via the with statement. However, you can specify a single variable name with the variable setting.
So you could do this:
<input type="checkbox" name="6a" <%= v['6a'] ? "checked" : "" %>>
and this:
var t = _.template($('#whatever').html(), null, { variable: 'v' });
var h = t({ '6a': true });​
Demo: http://jsfiddle.net/ambiguous/hBhfu/
You could also wrap it manually when you call the template function:
t({ v: { '6a': true }});
You'd use the same template as above in this case.
Demo: http://jsfiddle.net/ambiguous/8AZKw/

Resources