I am trying to take value of one expression to another as below:
<label class="col-md-12" ng-repeat="a in filters"> {{a.label}}
<select ng-model="qqq">
<option ng-repeat="f in values " ng-value="{{f.{{a.label}}}}" >
{{f.{{a.label}}}}
</option>
</select>
</label>
I know that not the correct way but just to explain the question exactly I wrote that. Also both Values and filters are two different and independent json objects, So suppose if
{{a.label}}= manufacture
then
{{f.{{a.label}}}} = {{f.manufacture}}
and both the object doesn't have any common attributes
You can use bracket notation to access property like {{f[a.label]}}.
Related
I have a form which is being generated by AngularJs via a JSON object that returns an array of select names and values. The code is below and working well:
<div ng-cloak ng-repeat="site in form.json" class="form-group">
<label class="control-label col-md-3">{{site.ItemName}}</label>
<div class="col-md-6">
<select class="form-control select2">
<option value="show-all">All</option>
<option ng-repeat="item in site['SelectList' + ($index + 1)]" value="{{item.SelectValue}}">{{item.SelectText}}</option>
</select>
</div>
</div>
So it's currently generating two select drop downs from 1 JSON object being generated in the backend via PHP. I now need it to also generate some check boxes on the form so am adding these into the array generated by the PHP. The JSON for these will remain in the same format as for the current selects (select name, select value). The additonal data will be appended to the end of the current JSON object so I just need to make the div with class="col-md-6"> conditional. I have a value being returned into the expression {{site.ItemName}} which will be perfect for filtering this but I can't see how I can use this with ng-show to make this work. Ideally I need something like this on the current div:
<div ng-show="{{site.ItemName}} !== 'checkboxes'" class="col-md-6">
<select class="form-control select2">
<option value="show-all">All</option>
<option ng-repeat="item in site['SelectList' + ($index + 1)]" value="{{item.SelectValue}}">{{item.SelectText}}</option>
</select>
</div>
And then the opposite on the new code for the checkboxes. I've tried the above but it isn't working. Thinking about it I will probably need another conditional on the actual ng-repeat so it doesn't action on the select drop-down HTML when we are looping through for the checkboxes.
Does this make sense? Or is it a crazy approach? Should I just create a separate app.controller and call to the api for the checkboxes? I'm trying to get all form HTML back in a single JSON object to avoid multiple calls.
Thanks,
Noon.
ng-show expects an expression , not interpolation
Try
ng-show="site.ItemName != 'checkboxes'"
Variables used will be evaluated within angular scope context
I have a select being rendered inside of an agGrid. Nothing exceptionally complicated.
<select ng-model="data.stdPayerClassFnbr" ng-change="vm.save(data)" style="width: 100%"
ng-options="item.stdPayerClass for item in vm.payerClassList track by item.id">
</select>
The crazy thing is this; I keep getting the missing value option:
<option value="?" selected="selected"></option>
Even though the value of data.stdPayerClassFnbr exists in the list of rendered options:
<option value="1" label="TBD">TBD</option>
The underlying data type of both data.stdPayerClassFnbr and item.id is int; however I've tried making them both string by executing a map against their values before binding them. That did not help. I've got to be configuring this select wrong.
I've also tried the ng-repeat approach:
<select ng-model="data.stdPayerClassFnbr" ng-change="vm.save(data)" style="width: 100%">
<option ng-repeat="item in vm.payerClassList" value="{{item.id}}">{{item.stdPayerClass}}</option>
</select>
This did not help either.
Make sure your stdPayerClassFnbr model object has the same properties as the payerClassList[x] items. Especially properties id and stdPayerClass
I found the issue. It was the track by expression. Since I was binding to an array of objects that came back from a lookup, when selecting or looking for a value, it was looking for the entire object by reference. Removing the track by expression caused the binding to work directly on the numeric value:
<select ng-model="data.stdPayerClassFnbr" ng-change="vm.save(data)" style="width: 100%"
ng-options="item.id as item.stdPayerClass for item in vm.payerClassList">
</select>
This generates a very different list of options:
<option value="number:1" label="TBD" selected="selected">TBD</option>
I hope this helps somebody in the future! It may even help me one day!
When I click a button and get the selected schoolclass via:
$scope.selectedSchoolclasses[0] then there is only the schoolclass schoolclassNumber like "7a" but not the Id property.
Why is that? The bound schoolclasses array and its item have Id and schoolclassNumber properties.
Controller
$scope.schoolclasses = schoolclasses;
$scope.selectedSchoolclasses = [];
Html
<div class="col-sm-8">
<select size="5" class="form-control control-label col-sm-6" multiple ng-model="selectedSchoolclasses">
<option class="co-sm-6" ng-repeat="s in schoolclasses">
{{s.schoolclassNumber}}
</option>
</select>
</div>
To be able to store instances of objects, you need to use ng-options:
<select size="5"
class="form-control control-label col-sm-6"
multiple
ng-model="selectedSchoolclasses"
ng-options="s.schoolclassNumber for s in schoolclasses">
</select>
In many cases, ngRepeat can be used on <option> elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance, as well as providing more flexibility in how the <select>'s model is assigned via the select as part of the comprehension expression. ngOptions should be used when the <select> model needs to be bound to a non-string value. This is because an option element can only be bound to string values at present.
(emphasis mine)
I have a problem and I don't see how to deal with it simply.
I have a select with option (with ng-repeat in it, I don't use ng-options to do that because I need to have ng-class on option).
<input ng-model="query" type="text">
<select class="span12 long-list" multiple="multiple">
<option ng-class="whatever" value="{{ element[idAttribute] }}"
ng-repeat="element in elements | filter:query">
{{ element[valueAttribute] | translate }}
</option>
</select>
This code is part of a template directive so valueAttribute and idAttribute are dynamique.
With this code, the filter is applied on my elements objects.
The problem is that the filter only applies on untranslated content of the object and I want it to be applied on the object AND the translated value.
Is there a simple way to do it in using only the view ?
I see two solutions to do it but I have to manipulate other part of the code :
- Use a custom filter wich translate the value before filtering it
- Add in each element object a translated attribute
thank you
I have an issue with angularjs's select directive.
Here is my code:
<ul class="thumbnails">
<li class="span4" ng-repeat="product in productsDTO">
<div class="thumbnail">
...
...
...
<div class="span4" ng-repeat="varCat in product.varietyCategoriesAndOptions">
{{varCat.varietyCategoryName}}
<br />
<br /><br />
<select ng-model="varCat.varietyCategoryOption" ng-options="varietyCategoryOptionTransfer.varietyCategoryOptionId as varietyCategoryOptionTransfer.varietyCategoryOptionValue for varietyCategoryOptionTransfer in varCat.varietyCategoryOptions">
<option value="">Select color</option>
</select>
</div>
...
...
</div>
</li>
</ul>
I have a $http call that returns json which gets added to the local scope.
function getProductsByCategoryIdServiceCall(CategoryService, categoryId){
CategoryService.getProductsByCategoryId(categoryId).success(function(data){
$scope.productsDTO = data;
}).error(function(data){
$scope.productsDTO = null;
});
}
So basically I have a set of json objects returned from a webservice call, I set the local $scope to have those json objects, and the first iteration tag for productsDTO iterates over the newly populated objects.
Each product has a seperate object that shows what special categories this product has, and the options for those category(s).
I am trying to have the select tag be bound (ng-model) to the varCat Object. This is the one currently being iterated over, and the same object that also contains the array of options for the category that I am trying to set for the select tag directive.
I added a special field on the varietycategory object called varietycategoryoption specifically to hold the current state of that particular select category. I'm doing it this way because there could be many many of these category select's per page, and it is unknown how many, so I can't just hard code it into the page.
It doesnt seem to be working. Does anyone have any advice?
All of the json is a lot of data, but here is the part of the json return inside product that has all of the values associated with the select box:
"varietyCategoriesAndOptions":{"1":{"varietyCategoryId":111,"varietyCategoryName":"color","varietyCategoryOptions":{"202":{"varietyCategoryOptionId":202,"varietyCategoryOptionValue":"red"},"203":{"varietyCategoryOptionId":203,"varietyCategoryOptionValue":"blue"}},"varietyCategoryOption":null}}
**UPDATE*******************
user Chandermali said I was treating my data like it was
in array format, when it is in object format. Chandermali said to use this format
(key, value) in product.varietyCategoriesAndOptions
I tried this in my select
<select ng-model="varCat.varietyCategoryOption" ng-options="(varietyCategoryOptionTransfer.varietyCategoryOptionId, varietyCategoryOptionTransfer.varietyCategoryOptionValue) in varCat.varietyCategoryOptions">
<option value="">Select color</option>
</select>
And got this error:
Error: [ngOptions:iexp] Expected expression in form of '_select_ (as _label_)?
for (_key_,)?_value_ in _collection_' but got
'varietyCategoryOptionTransfer.varietyCategoryOptionId,
varietyCategoryOptionTransfer.varietyCategoryOptionValue in
varCat.varietyCategoryOptions'.
This change in the select tag was enough for it to work for me.
<select ng-model="varCat.varietyCategoryOption" ng-options="value.varietyCategoryOptionId as value.varietyCategoryOptionValue for (key,value) in varCat.varietyCategoryOptions">
<option value="">Select color</option>
</select>
I just had the wrong formatting on the select directive to access my object graph.
The select box is now being populated with the data.
Thank you very much for you patience.
Seeing your json neither your varietyCategoriesAndOptions or varietyCategoryOptions are array. These are object maps. You need to use the syntax for object map like
(key, value) in expression – where key and value can be any user
defined identifiers, and expression is the scope expression giving the
collection to enumerate.
For example: (key, value) in product.varietyCategoriesAndOptions