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
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 see there are a lot of questions similar to this one, but I couldn't find any that requires exactly what I have:
ngRepeat inside option-tag
ngChange inside select-tag
I need to get the index of selected option. This is my code
<select data-placeholder="Choose" ng-model="pp.sif" name="myname" ng-change="onChangeSifra()">
<option ng-repeat="item in sif.what track by $index" value="{{item.SIF}}">
{{item.LABEL}}
</option>
</select>
ngClick inside option-tag doesn't work on Chrome and IE, so that is not an option.
ngOption (in select-tag) instead of ngRepeat (in option-tag) is not an option because sif.what is an array of objects; also, that is why I can't use indexOf function (ngModel has only part of this object).
Any ideas?
EDIT:
Since a lot of you are telling me to switch to ngOption, let me make it more clear why this isn't an option.
I iterate trough something like this:
$scope.sif.what = [
{SIF: 1, LABEL: "label 1", SAVED: "save me 1"},
{SIF: 2, LABEL: "label 2", SAVED: "save me 2"},
{SIF: 3, LABEL: "label 3", SAVED: "save me 3"},
]
So in a combobox I have "label" as label, "sif" as value, ngModel is the value of "sif", but on ngChange I need the entire object, sif.what(index), or $index.
Thanks.
I am not sure how will you be able to pass back the index of the selected item unless you put that as the value of the selected option.
Here is a way you can possibly do it.
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $filter) {
$scope.sif = {'what': [{'SIF':'A'},{'SIF':'B'},{'SIF':'C'}]};
$scope.onChangeSifra = function(item){
$scope.selectedItem = $filter('filter')($scope.sif.what, {SIF : $scope.pp.sif}, true)[0];
$scope.selectedItemIndex = $scope.sif.what.indexOf($scope.selectedItem);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<body ng-app="app" ng-controller="ctrl">
<div class="col-lg-12">
<select data-placeholder="Choose" ng-model="pp.sif" name="sif" ng-change="onChangeSifra()">
<option ng-repeat="item in sif.what track by $index" value="{{item.SIF}}">
{{item.SIF}}
</option>
</select>
<p>Selected : {{pp.sif}}</p>
<p>Index : {{selectedItemIndex}}</p>
</div>
</body>
try to use ng-options instead of ng-repeat e.g.
<select data-placeholder="Choose" ng-model="pp.sif" name="sif" ng-change="onChangeSifra()" ng-options="{index: idx, item:item.SIF} as item.SIF for (idx, item) in sif.what">
</select>
Observation : use ngOptions attribute instead of ng-repeat.
Use array.indexOf() method to find the index of selected item.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.sif = {
"what": [
{
"SIF":1
},
{
"SIF":2
},
{
"SIF":3
}
]
};
$scope.onChangeSifra = function(selectedItem) {
console.log($scope.sif.what.indexOf(selectedItem));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select data-placeholder="Choose" ng-model="pplsif" name="sif" ng-change="onChangeSifra(pplsif)" ng-options="item.SIF for item in sif.what">
</select>
</div>
You can try this login
<select ng-model="optIndex" ng-change="getIndex()">
<option ng-repeat="opt in opts" value={{$index}}></option>
<select>
$scope.getIndex = function(){console.log($scope.optIndex);}
Now you can access your index using this snnipet :)
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>
I have an array like below.
$scope.set = [
{"name":"name1", "value":"value1"}
{"name":"name2", "value":"value2"}
{"name":"name3", "value":"value3"}
]
I am trying to show the options based on previous selection. for example if i select name1 then for the next time i don't want to show the selected option. I want to show only remaining two names i.e, name2 and name3.
I'm trying to achieve this by using some filters but it is effecting the model $scope.set
Please help me in this. thanks in advance.
A possible solution for you problem can be found here on Fiddle. I've created something quickly from scratch since your post did not have an original Fiddle.
<div ng-app ng-controller="Controller">
Select value : <b>{{myDropDown.name}}</b><br/><br/>
Showing all other available options:
<select ng-options="item.name for item in items | filter: {name: '!' + myDropDown.name}" ng-model="myDropDown">
<option value="">Select other value</option>
</select>
</div>
function Controller ($scope) {
$scope.myDropDown = 'one';
$scope.items = [
{"name":"name1", "value":"value1"},
{"name":"name2", "value":"value2"},
{"name":"name3", "value":"value3"}
];
}
I have an angular app that contains a form, which has a select. I can choose one of the selects, and its updated in the model perfectly. But the next time i go in the form its suppose to be "pre filled" as the data already exists. And all the data is filled ok, but angular doesn't seem to recognise that the value of the model corresponds to the value of the select.
html/angular:
<select ng-model="userData.country"
ng-options="country as country.name for country in countries">
</select>
data
[
{"iso":"DK","name":"Danmark"},
{"iso":"DE","name":"Germany"}
]
The wanted behaviour is that once I set this data to userData.country, that the form will come pre-selected with the correct country that the user chose in the previous form.
In Your HTML you need to add country.iso instead of country
<select ng-model="userData.country"
ng-options="country.iso as country.name for country in countries">
</select>
And in your controller
$scope.userData = {"country":"DK"}; // this can be filled with prefilled data. which can be fetched from db or stored in a service
In case you want to save the whole object instead of just the iso code here is an example:
http://jsfiddle.net/2ES4t/
JS File:
$scope.countries = [{
iso: "DK",
name: "Danmark"
}, {
iso: "DE",
name: "Germany"
}];
$scope.userData = {};
$scope.userData.country = $scope.countries[0];
HTML File:
<select ng-model="userData.country" ng-options="country as country.name for country in countries"></select>
I would suggest storing the whole object, that you wouldn't have to search the country array later if you needed the name and only had the ISO code.
You probably are not filling the form in the Angular Way.
To do this, you should set the model (and the form will be pre-filled):
In your controller:
$scope.countries = [
{"iso":"DK","name":"Danmark"},
{"iso":"DE","name":"Germany"},
{"iso":"PT","name":"Portugal"},
{"iso":"CN","name":"Canada"}
];
$scope.userData = {};
$scope.userData.country = $scope.countries[3];
Fiddle
Try to change your html/angular to
<select ng-model="country"
ng-options="country.name for country in countries" ng-change="countryChanged(country)">
</select>
and your controller:
$scope.countryChanged = function(country){
$scope.userData.country = country
}