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
Related
I have a ng-model called field.value which is also from ng-repeat. when I check the field.value by putting inside the <span> element. I can check the value is 17 from which I expected the drop down goes to the id of 17 but it's doing nothing. How can I make the dropdown choose a value depending on id bound with model.
<div ng-if="field.name=='OrderTypeId'" class="input-group inputFill">
<select class="form-control inputFill2" ng-model="field.value"
ng-options="oderType.id as oderType.name for oderType in dropdown.availableOrderTypes | orderBy:'name' track by oderType.id">
</select>
<span>{{field.value}}<span>
</div>
From the Docs:
select as and track by
Be careful when using select as and track by in the same expression.
For more information, see
AngularJS ng-options Directve API Reference - select as and track by
This is regarding AngularJS ng-repeat . I have the following HTML code
<div class="selections">
<select class="form-control" size="15" data-ng-model="selections[$index]">
<option data-ng-repeat="(key,value) in elements"
data-ng-bind-html="value | add_space" value="{{key}}">value</option>
</select>
<p>List of Selections : {{selections[$index]}}</p>
</div>
Currently I am able to get the value using ng-model="selections[$index]".
How do I retrieve the text using the same format?
I am restricted to use the [$index] format as my entire code block is within another ng-repeat loop.
Thanks in advance
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 am getting empty Option field in select tag.
My code is shown below:
openSelectBoxModel="47"
openSelectList=[{id:""47",name:"text"}];
valuekey="id";
titlekey="name";
<select id="reportOpenSelectBoxSingle" size="6" ng-style='selectStyle' class="openSelectBox" ng-model="openSelectBoxModel" ng-change="changeFn()" >
<option ng-selected="openSelectBoxModel===item[valueKey]" ng-repeat="item in openSelectList" id="" ng-value="{{item[valueKey]}}" ng-title="{{item[titleKey]}}" ng-bind="item[titleKey]"></option>
</select>
Please help me to solve this problem.
You should not use ng-selected with ng-model.
The thing to do is to bind the selected item to your ng-model before displaying it.
//Also, instead of ng-repeat, you should use ng-option
As far as performance is regarded : ng-options does not create child scopes for every iteration. When angular performs its digest, your ng-repeat will slow it. If you have a list with hundreds of elements, you will feel a difference.
<select id="reportOpenSelectBoxSingle"
size="6"
ng-style='selectStyle'
class="openSelectBox"
ng-model="openSelectBoxModel"
ng-change="changeFn()" >
<option ng-repeat="item in openSelectList"
value="{{item[valueKey]}}"
title="{{item[titleKey]}}"
ng-bind="item[titleKey]">
</option>
</select>
Furthermore, you need to declare your variables inside a controller :
$scope.openSelectBoxModel="47";
$scope.openSelectList=[{id:"47",name:"text"}];
$scope.valuekey="id";
$scope.titlekey="name";
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