I'm trying to get a select box working in Angular. The problem I'm experiencing is to do with ng-init and setting it's default value from an object which is created during runtime. Heres my code:
<select
ng-model="settings.editing.panel.data.production_company"
ng-change="settings.editing.panel.data.production_company = selectValue"
ng-init="selectValue = settings.editing.panel.data.production_company"
>
<option
ng-repeat="(key, value) in lists.production_companies"
value="{{key}}"
ng-selected="{{selectValue}}"
>
{{value}}
</option>
</select>
"lists.production_companies" is a simple key-value array of names, populated during initial page render, updated by ajax.
The object "settings.editing.panel.data" starts its life as NULL, but later is loaded with a correctly formatted object which contains the property "production_company".
I have found setting ng-init to something like "ng-init="selectValue = 3" works fine. Setting a $scope.test = 3, then setting "ng-init="selectValue = test" works fine too.
However, my dynamic value does not work. How can I use my dynamically created object to set the value of this select box during runtime with the set-up I have?
<select
ng-model="settings.editing.panel.data.production_company"
ng-options = "option as option.keyName for option in list.production_companies"
> <!--set keyName equal to your object's key-->
</select>
Then in your controller
$scope.settings.editing.panel.data.production_company = list.production_companies[0] // Or which value you want to assign
You question confused me somehow. The following snippet is a working one, is that what you want?
'use strict';
angular.module('DemoApp', []);
angular.module('DemoApp').controller('DemoCtrl', ['$scope', function($scope){
$scope.lists={
production_companies: { "0": "prod 1", "1":"prod_2" },
};
$scope.settings={
editing: {
panel: {
data: null
}
}
};
$scope.setData=function(data){
$scope.settings.editing.panel.data={
production_company: data
};
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<select ng-model = "settings.editing.panel.data.production_company">
<option ng-repeat = "(key, value) in lists.production_companies" value = "{{key}}">{{value}}</option>
</select>
<div>You select: {{settings.editing.panel.data.production_company}}</div>
<button ng-click="setData('0')">Set Data to Prod1</button>
<button ng-click="setData('1')">Set Data to Prod2</button>
</div>
In my circumstances I was able to change my backends data format to set an object like:
{"id": 1, "name":"prod comp 1"}
and then change my select model accordingly. In hindsight I needed this for the ID anyway.
<select
ng-model="settings.editing.panel.data.production_company"
>
<option
ng-repeat="option in settings.lists.production_companies"
value="{{option.id}}"
ng-selected="{{option.id}} == settings.editing.panel.data.production_company"
>
{{option.name}}
</option>
</select>
Related
nameList contains [“Julia”, “Evan”, “Tomas”];
select ng-model=“names” ng-options=“x for x in nameList”
In controller, I have a service api call GetNameByID/{id}”and depending on the id, I want to initialize the dropdown value of the modal form.
So if the user clicks ID 1, the dropdown defaults to Julia.
The problem is within the service call, when I try to initialize the model by doing $scope.names = data, it adds an empty option at the top instead of selecting Julia. When I console.log(data), it prints “Julia” but it becomes <option value=“?”></option>
How can i fix this?
So Lets have a HTML example for this case:
<div ng-app ng-controller="MyCtrl">
<select ng-model="names" ng-options="item for item in nameList">
</select>
<p>Selected : {{names}}</p>
<button ng-click="Update(2)"> Update(1)</button>
</div>
and Conrtoller has one service call which update your dropdown accordingly based on index.
function MyCtrl($scope) {
$scope.names = "Julia"
$scope.nameList = ["Julia", "Evan", "Tomas"];
$scope.Update = function(_value){
$scope.names = $scope.nameList[ parseInt(_value)] ;
}
}
Please have a look into running code, jsfiddle.
You can just use ng-init to initialize the dropdown first value like so:
<select ng-model="names" ng-init="names = data[0]" ng-options="x for x in data">
<option value="">Select</option>
</select>
Where [0] in data[0] is the position of the array.
Here is an example where you can set the option
In html file
<select ng-model="selectedName" ng-options="x for x in nameList"></select>
In js file
app.controller('myCtrl', function($scope) {
var id = 1;
$scope.names = ["Julia", "Evan", "Tomas"];
$scope.selectedName = $scope.names[id-1]; <---- here you can pass you id.
});
subtract id with 1 because array start with 0. Hope this is what you want to acheive.
I have a loop "ng-repeat" inside of
<select ng-model="something"></select>
so that each option in a list is rendered as an
<option>
inside of select block. My aim is to make "something" (which is a ng-model attached to select) to be equal to a selected object inside of the list. At this moment when I do "value="{{option}}" as a parameter of option, I have a JSON object as a String. But what I need is to get an object as an object. The code looks like this:
<select ng-model="something">
<option ng-repeat="option in list" value="{{option}}">{{option.name}}</option>
</select>
The thing I want is easily done by using ng-options, but I need to add additional "style" parameters depending on option.anotherField to each
<option>
You can use ng-value instead of value, which gives you the object you want:
<select ng-model="something">
<option ng-repeat="option in list" ng-value="option">{{option.name}}</option>
</select>
What about approach via temp proxy and it's relation with something variable with the help of ng-change($scope.setModel) directive:
(function(angular) {
'use strict';
angular.module('app', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [{name:'Tom',age:23},{name:'Max',age:33},{name:'Sam',age:43}];
$scope.something = $scope.list[0];
$scope.temp = $scope.something.name;
$scope.setModel = function(){
for(var item of $scope.list)
if(item.name == $scope.temp){
$scope.something = item;
break;
}
}
}]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ExampleController">
<select ng-change='setModel()' ng-model='temp'>
<option ng-repeat='option in list track by option.name' ng-attr-title='{{option.age}}'>{{option.name}}</option>
</select>
<div>something: {{something | json}}</div>
</div>
I need help with angularJS. I call ajax as follows:
$scope.$watch('value1', function() {
if ($scope.value1 != null) {
$http({
method : 'GET',
url : 'http://localhost:8080/program1/api/verify?post='+$scope.value1
}).success(function (result) {
$scope.data1 = result;
console.log("ajax->"+$scope.value2);
});
}
});
In my view i have the folloing code:
<div ng-controller="MainController">
<select ng-model="data1"
ng-options="data for data in data1">
<option value=""></option>
</select>
{{data1}}
</div>
My problem is that the dropdown doesn't change in the view.
Could anyone help me about it?
Thank you in advance
you issue is your ng-options and ng-model are using the same property data1.
When you select a value that selected value is bound to the property of ng-model so that is data1 however your ng-options is using data1 so it gets overwritten.
So basically your ng-options and ng-model should use two different properties of your scope. One representing the selected value, the other being the array of values to populate the options.
see fiddle: http://jsfiddle.net/1uzyoLmr/
<select ng-model="data1"
ng-options="d for d in data">
<option value=""></option>
</select>
{{data1}}
and your controller
$scope.data1;
$scope.data = [10, 11, 23];
Docs for reference: https://docs.angularjs.org/api/ng/directive/ngOptions
I am unable to update value of select from AngularJs.
Here is my code
<select ng-model="family.grade" >
<option ng-repeat="option in options" value='{{option.id}}'>{{option.text}}</option>
</select>
Here are the options which i am using to populate my select
var options = [{text:'Pre-K',id:'Pre-K'},
{text:'K',id:'K'},
{text:'1',id:'1'},
{text:'2',id:'2'},
{text:'3',id:'3'},
{text:'4',id:'4'},
{text:'5',id:'5'},
{text:'6',id:'6'},
{text:'7',id:'7'},
{text:'8',id:'8'},
{text:'+',id:'+'}];
Here is mu js code.
$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
$scope.family.grade = "1"
})
When ever value of family_member.date_of_birth changes it should set they value of select to 1. But this change is not visible on UI.
You should use ngSelected to select the option.
it could be something like this:
<select ng-model="family.grade" >
<option ng-repeat="option in options"
value='{{option.id}}' ng-selected="family.grade==option.id">
{{option.text}}</option>
</select>
Hope this helps.
I think you are looking for the track by clause of ng-options:
<option ng-repeat="option in options track by option.id">{{option.text}}</option>
However, you will still need to supply an object with an id property to set:
$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
$scope.family.grade = { id: "1" }
})
The options array indiviual elements are objects. So the respective ng-model also need to be an object. So even when it is being changed in js, the respective object has to be provided rather than a string.
Sample demo: http://plnkr.co/edit/naYcnID29SPa90co0leB?p=preview
HTML:
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.options = [{text:'Pre-K',id:'Pre-K'},
{text:'K',id:'K'},
{text:'1',id:'1'},
{text:'2',id:'2'},
{text:'3',id:'3'},
{text:'4',id:'4'},
{text:'5',id:'5'},
{text:'6',id:'6'},
{text:'7',id:'7'},
{text:'8',id:'8'},
{text:'+',id:'+'}];
$scope.family = {};
$scope.family_member = {
date_of_birth: '10-Jan-1986'
};
$scope.$watch("family_member.date_of_birth", function(newValue, oldValue) {
$scope.family.grade = $scope.options[2];
});
});
i got a json that looks like this
[{"partner_id":"8","partner_name":"Company1","partner_location":["Place1","Place2","Place3"],"partner_user":["User1","User2","User3"]},{"partner_id":"9","partner_name":"Company2","partner_location":["Place4","Place5"],"partner_user":["User4","User5"]}]
Now i want to do something like this. I have 2 dropdowns and i want the first one to be filled with the partner_name from my 2 lists so it has to look like this
<select>
<option value="8">Company1</option>
<option value="9">Company2</option>
</select>
but i want it to be selected already with a value that i set inside service_id.
I understand you can do this somehow like this
<select ng-options="partner for partner in jsonPartners" ng-model="service_id"></select>
but when i do this, i have inside my select 2 options called [object Object]
And the 2nd select is more tricky, i want it to have the locations of what the id was selected in my 1st select. So if i selected Company1, than it should be filled with Place1, Place2, Place3 and if i selected Company2, it should be filled with Place4, Place5.
Thank you in advance, Daniel!
HTML
<div ng-app="myApp" ng-controller="ctrl">
<select ng-options="partner as partner.partner_name
for partner in jsonPartners" ng-model="service_id"></select>
<select ng-options="place for place in service_id.partner_location"
ng-model="service_location"></select>
</div>
JS
var app = angular.module('myApp', []);
function ctrl($scope){
$scope.jsonPartners = [{"partner_id":"8", ..},{"partner_id":"9", ..}]
$scope.service_id = $scope.jsonPartners[1];
}
fiddle
I would add the ng-change to select 1st item by default:
JS controller
$scope.jsonPartners = [{
"partner_id": "8",
"partner_name": "Company1",
"partner_location": ["Place1", "Place2", "Place3"],
"partner_user": ["User1", "User2", "User3"]
}, {
"partner_id": "9",
"partner_name": "Company2",
"partner_location": ["Place4", "Place5"],
"partner_user": ["User4", "User5"]
}];
$scope.partner = $scope.jsonPartners[0];
$scope.place = $scope.partner.partner_location[0];
$scope.onChange = function(partner){
$scope.place = partner.partner_location[0];
}
HTML
<div ng-controller="fessCntrl">
<select ng-model="partner"
ng-options="partner as partner.partner_name for partner in jsonPartners"
ng-change="onChange(partner)"
></select>
<select ng-model="place"
ng-options="place as place for place in partner.partner_location"
></select>
</div>
Demo Fiddle