I have JSON which stores a list of options. I want to manipulate the DOM with jQuery in controller. For example, I have a <div id="div"></div> in html and I want to do
$scope.options = "options come from JSON";
$('#div').append("<select ng-model='model'><option ng-repeat='opt in options'>{{opt.value}}</option></select>")
in controller. When I open the html page <select></select> tag is coming but options are empty. My question is that how can I loop options with ng-repeat in controller and send to html page? Thank you.
You should prefer using Angular ng-options:
<select ng-model="model" ng-options="opt.value for opt in options"></select>
As a side note (despite the fact that this code can work), you should avoid doing DOM manipulations on an AngularJS app. It is not JQuery, and it is not the Angular way to do this.
Please don't do DOM manipulation in such a simple example - in general, you should save it for directives. Just write this in your HTML straight up:
<div id="div">
<select ng-model='model'>
<option ng-repeat='opt in options'>{{opt.value}}</option>
</select>
</div>
Could do something like this
//View
<select ng-if="options">
<option ng-repeat="opt in options">{{opt.value}}</option>
</select>
//Controller
$scope.options = <The JSON object>;
Related
I have created a select box using ng-repeat. Inside option tag I am showing two values using Angular interpolation directive, and I want to show second text at right. I am trying to use HTML inside {{}}. But it is not working.
<select class="large" name="selectlarge" id="selectlarge" ng-model="selaccount">
<option value="{{cloneditem.description}}" selected="selected" ng-repeat="cloneditem in stub.custServDetails.cloningItems">
<p>
{{cloneditem.description}} {{<p style="float:right">cloneditem.balance</p>}}
</option>
</p>
</option>
</select>
I think this
{{<p style="float:right">cloneditem.balance</p>}}
needs to be
<p style="float:right">{{cloneditem.balance}}</p>
(The HTML needs to be outside the curly brackets).
I've seen numerous examples of angularjs using JSON data to populate options in a select dropdown, but after numerous attempts and variations I still end up with a blank dropdown menu. I'm sure there's something wrong with my object naming convention, as all the angular examples are pretty confusing (what's plural? what isn't? etc.) Any help you can offer would be greatly appreciated.
JSON example:
{"fields":[
{"state": "OH",
"gender": "male"},
{"state": "OH",
"gender": "female"},
{"state": "IN",
"gender": "male"}
]};
html:
<div class="input-field col s12 m4" ng-app="totalQuery" ng-controller="queryCtrl">
<select multiple>
<option ng-repeat="fields in myData">{{fields.state}}</option>
</select>
<label>First Category</label>
</div>
<div class="input-field col s12 m4" ng-app="totalQuery" ng-controller="queryCtrl">
<select multiple>
<option ng-repeat="fields in myData">{{fields.gender}}</option>
</select>
<label>Second Category</label>
</div>
angularjs:
<script>
var app = angular.module('totalQuery', []);
app.controller('queryCtrl', function($scope, $http){
$http.get("file.json").then(function(response){
$scope.myData = response.data.fields;
});
});
</script>
You just need to add .fields into your ng-repeat.
Change:
<option ng-repeat="fields in myData">{{fields.state}}</option>
To:
<option ng-repeat="fields in myData.fields">{{fields.state}}</option>
Here is a jsFiddle of the solution: http://jsfiddle.net/eLnfgnc9/4/
It is worth noting, that it is better to use ng-options instead of ng-repeat. I find it more confusing than ng-repeat but it just seems to work better. Here is a link to the angular doc for ng-options: https://docs.angularjs.org/api/ng/directive/ngOptions
First of all you don't need to define ng-app and ng-controller twice.
Secondly what I don't understand is why are you using two drop down menu's or jump menu to change the state and according to that you will bring the gender ? right ?
If that's the case usually when you you are working with drop down menu you need an id for each option which will be sent back to bring changed item on the basis of id.
I've made a working plunker Populate Drop Down with Json please take a look if that's what you need. I'm sure you will get the idea how to do it.
The directive inside my controller is simply list items with data from my api call. HTML for that:
<div ng-app="WWnetworkEvents">
<ul ng-controller ="networkEventsCtrl">
<networkevent-directive></networkevent-directive>
</ul>
This is my directive html:
<li ng-repeat="event in events | filter:queryevents | orderBy:orderProp" >
<h2>{{event.title}}</h2>
<ul>
<li>Posted on:{{event.date | myDateFormat }}</li>
<li>Tickets available:{{event.tickets}}</li>
<li>Details:{{event.body}}</li>
</ul>
</li>
Outside of my WWnetworkEvents module, i have the following search and filter options, but I don't know how would I bind them, if they are outside of my ng-app:
<h2>Search Events</h2>
<input type="search" ng-model="queryevents">
<h2>Filter Events</h2>
<select class="form-control" ng-model="orderProp">
<option value="title">Alphabetical</option>
<option value="-date" >Newest</option>
<option value="date" >Oldest</option>
<option value="-tickets">Tickets Left</option>
</select>
I believe there are two ways to handle your situation.
Use ng-repeat outside directive.
This might require some work getting everything to work again.
Use $broadcast' or$emit' to make your directive aware of the changes on the ng-model="queryevents" and ng-model="orderProp". Once your directive is aware of the changes then you can use $filter in your controller to filter the required data.
I ended up using ng-modules. You can install it with bower by running:
bower install ng-module
More info here: https://github.com/luisperezphd/ngModule
I'm pretty new to Angular, so I may be going about this all wrong...
I have a <select> similar to the following:
<select ng-model="mySelectedValue">
<option value="">--</option>
<option ng-repeat="myValue in someDynamicArrayOfValues" value="{{myValue}}" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(myValue)">{{myValue}}</option>
</select>
This mostly works... The dropdown initially renders with the correct option selected, and if I change the selected option, then mySelectedValue will get the new selection. However, mySelectedValue does NOT get the initially-selected option. mySelectedValue is blank until I change the value in the dropdown.
I looked at ng-init, but that seems to get evaluated before someDynamicArrayOfValues is set...
Is there a way I can get mySelectedValue to receive the value in the initially-selected <option>?
UPDATE:
I forgot to mention that I had also tried using ng-options, but haven't had any luck getting that to work in conjunction with determining which option was selected.
I've tried this:
<div ng-show="someDynamicArrayOfValues">
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(arrayValue)">
<option value="">--</option>
</select>
</div>
and this:
<div ng-show="someDynamicArrayOfValues">
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-init="myFunctionForSettingSelectedValue()">
<option value="">--</option>
</select>
</div>
but neither of those work because the select is built (and ng-init and ng-selected both get evaluated) before someDynamicArrayOfValues has been set and, therefore, before the <select> is even visible. When using <option ng-repeat="...">, the <select> doesn't get built/initialized until after someDynamicArrayOfValues is set, which is why I had been going that direction.
Is there a way to get the ng-options technique to work while, at the same time, having the select dependent on someDynamicArrayOfValues (if ng-options is the better way to go)?
UPDATE 2:
Here's a Plunker (modified from ababashka's answer) that is a little closer to what I'm ultimately trying to achieve: http://plnkr.co/edit/Kj4xalhI28i5IU0hGBLL?p=preview. It's not quite there yet... I'd like it to have each of the 3 dropdowns set with the closest-matching dynamic value once someDynamicArrayOfValues is set.
I think that it will be good it you will use ng-options attribute of select tag. It's an angular directive which creates options according to Array of options. You can take a look at select documentation
If you use your code - your function myFunctionForDeterminingWhetherValueIsSelected works twice for every option at initialization and once for every option item when you select some another option.
Demo with your code: http://plnkr.co/edit/0IVNLHiw3jpz4zMKcB0P?p=preview
Demo for select you could see at description of select directive.
Update
At first, to see when value is changed - you need to use ng-change attribute of select tag, like this:
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()">
<option value="">--</option>
</select>
Then, i don't know how does myFunctionForSettingSelectedValue look like, but there are 2 variants:
This function returns some value - then you need to use ng-init next way.
Controller:
$scope.someInitFunc = function () {
return 'One';
};
HTML:
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()"
ng-init="mySelectedValue = someInitFunc()">
<option value="">--</option>
</select>
You set value of mySelectedValue in this function - then you do this.
Controller:
$scope.someInitFunc = function () {
$scope.mySelectedValue = 'One';
};
HTML:
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()"
ng-init="someInitFunc()">
<option value="">--</option>
</select>
I have created an example which implements the first version of using ng-init. When new value is selected - it's printed to console.
Also, i moved options to the options.json file. So options are initialized just after ajax request was finished. Everything works great.
Demo: http://plnkr.co/edit/pzjxxTnboKJXJYBGcgNb?p=preview
Update 2
Hello again. I think you don't need to have any ng-init according to your requirements. You can just initiate values of your model when http request is finished. Also i don't understand why do you need ng-change function in this case.
Here is modified code you need from your plunk where values of ng-models are initiated after options are loaded.
JavaScript:
.controller('MainCtrl', function($scope, $http) {
$scope.someStaticArrayOfValues = ['One', 'Two', 'Three'];
$scope.mySelectedValues = {};
$http.get('options.json').then(
function (response) {
$scope.someDynamicArrayOfValues = response.data;
for (var i = 0; i < $scope.someStaticArrayOfValues.length; ++i) {
$scope.someDynamicArrayOfValues.some(function (value) {
if (value.substring(0, $scope.someStaticArrayOfValues[i].length) === $scope.someStaticArrayOfValues[i]) {
$scope.mySelectedValues[$scope.someStaticArrayOfValues[i]] = value;
return true;
}
});
}
},
function (response) {
console.log('ERROR!');
}
);
});
HTML:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-show="someDynamicArrayOfValues">
<ul>
<li ng-repeat="staticValue in someStaticArrayOfValues">
{{staticValue}} -
<select ng-model="mySelectedValues[staticValue]"
ng-options="myValue for myValue in someDynamicArrayOfValues">
<option value="">--</option>
</select>
<h2>{{mySelectedValues[staticValue]}}</h2>
</li>
</ul>
</div>
</body>
Demo: http://plnkr.co/edit/9Q1MH0esGE1SIJa0m2NV?p=preview
Here is a modified plunker that works as intended: http://plnkr.co/edit/Y8OSvmrG3u0XjnCU3ah5?p=preview.
The main change was using ng-if in place of ng-show. This forces angular to recompile/link the html whenever it is rendered:
<div ng-if="someDynamicArrayOfValues">
...
</div>
Also ng-change, from the original plunker, shouldn't be necessary, and there were a couple of typos fixed.
It works a whole lot better when you use ng-options on your select element instead of nesting option with ng-repeat.
https://docs.angularjs.org/api/ng/directive/select
Then you are capable of setting the ng-model with ng-init.
You can try to set the initial value of mySelectedValue in your Controller like so:
$scope.mySelectedValue = '';
I have created example for your problem in plnkr.
Visit: plnkr.co/edit/rKyjijGWSL1IKy51b8Tv?p=preview
You are going about it the reverse way. ng-model reflects the state of the <select> and is two-way bound.
You just need to set your mySelectedValue to what you want <select> to select first, and no other tricks are required.
So, in the controller, do something like the following:
$scope.mySelectedValue = someDynamicArrayOfValues[0];
And remove the ng-selected and the <option ng-repeat...> from <select>:
<select ng-model="mySelectedValue"
ng-options="value for value in someDynamicArrayOfValues">
<option value="">--</option>
</select>
I want to enable deep linking with the select element
<select ng-model="query">
<option ng-repeat="product in products">{{product.code}}</option>
</select>
So when I choose something, I want the url to change to app/productcode
Any ideas?
You should change your select to:
<select ng-model="query" ng-options="product.code for product in products"></select>
In your controller, you'll use the $location service to change to the route you want via a watch. Something along the lines of:
$scope.$watch('query', function() {
$location.path('/some/route/' + query);
});