Angular JS - Select option select option by value id - angularjs

I has made a ng-repeat of all users but what i want is that he selected current user
<select id="taskUser" class="form-control"
multiple="multiple"
ng-model="taskUser"
ng-options="user.ID as user.Name for user in header.users"
>
</select>
This is my repeater and i show how te list is look like:
<select id="taskUser" class="form-control ng-pristine ng-untouched ng-valid ng-empty" multiple="multiple" ng-model="taskUser" ng-init=" users = header.users[2].id" ng-options="user.ID as user.Name for user in header.users">
<option label="User 1" value="string:1">User 1</option>
<option label="User 2" value="string:2">User 2</option>
<option label="User 3" value="string:3">User 3</option>
</select>
To get the current user id i used {{header.user.ID}} than i get the result just: 3
That means that this need to be selected
<option label="User 3" value="string:3">User 3</option>

$scope.taskUser should be list and defined as [3] because you use multiple
Fiddle Demo
Full code:
function MyCtrl($scope, $timeout) {
$scope.header = {
users:[
{ID: 1, Name: "AAA"},
{ID: 2, Name: "BBB"},
{ID: 3, Name: "CCC"}
]
};
$scope.taskUser = [3];
}
HTML
<select id="taskUser" class="form-control"
multiple="multiple"
ng-model="taskUser"
ng-options="user.ID as user.Name for user in header.users"
>
</select>
<pre>taskUser: {{taskUser|json}}</pre>

You need to define the selected value in an array $scope.taskUser = [3];
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.header = {};
$scope.header.users = [
{ ID: 1, Name: 'John' },
{ ID: 2, Name: 'Rocky' },
{ ID: 3, Name: 'John'},
{ ID: 4, Name: 'Ben' }
];
$scope.taskUser = [3];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select id="taskUser" class="form-control"
multiple="multiple"
ng-model="taskUser"
ng-options="user.ID as user.Name for user in header.users"
></select>
</fieldset>
</div>

Related

ng-options need to be passed as an object value to an array

I need to pass the selected country name into key name country, but the $scope.options would not be recognized. I cannot select the country let alone pass the right country to the key value. So does anyone knows what I am doing wrong, and what the solution might be in this case.
Anyone an idea how I can fix this?
$scope.addComment = function() {
$scope.comments.push($scope.dataObject);
$scope.options = [{
id: 1,
country: "China"
},
{
id: 2,
country: "France"
},
{
id: 3,
country: "Germany"
},
{
id: 4,
country: "Japan"
},
{
id: 5,
country: "Hongary"
},
{
id: 6,
country: "Hong Kong"
},
{
id: 7,
countrybv : "Italy"
}]
$scope.dataObject = {
name: "",
country: $scope.options[0],
comment: ""
};
};
<body>
<td><select class="comment-form comment" ng-model="selected" ng-options="option as option.country for option in options track by option.id">
<option value="">Select a country</option>
</select></td>
</body>
Try this:
<select ng-model="selected"
ng-options="x as x.country for x in options track by x.Id"
class="form-control"
ng-required="true">
<option value="">-- Choose Country --</option>
</select>
For more option see
in html:
<select ng-model="selectedCountry" ng-options="country as country.country for country in countries track by country.id">
<option value="" disabled="" selected>Select Country</option>
</select>
<p>country: {{selectedCountry.country}}</p>
<p>id: {{selectedCountry.id}}</p>
I've made this in plnkr:
https://plnkr.co/edit/406tgmG5L4s5SFEeUlF3?p=info
Good luck!

how to make drop-down list dependent using json?

Im trying to create a dependent drop-down list box using json.For example: if the car brand selected is "bmw" then the car model drop-down must display only "suv" from the list and other two options shouldn't be displayed.Likewise for "Mercedes" it should display only "suv" and "coupe" in the car model. And also please explain what is the use of json? also how it effect the code.
my.html
Car Brand:
<select name="carname" ng-model="userSelect" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
<option ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand" >
{{ManufactureBrand}}
</option>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
<option ng-repeat="CarName in b" ng-bind="CarName">
{{CarName}}
</option>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
script.js
app.factory('Brandtest', function () {
var brand = {};
brand.sample = ['Bmw', 'Mercedes', 'Honda'];
brand.car = ['Suv', 'Sedan', 'Cope'];
{
return brand;
}
});
app.controller('selectDropdown', ['$scope', 'Brandtest', function ($scope, Brandtest) {
$scope.a = Brandtest.sample;
$scope.b = Brandtest.car;
$scope.list=[];
$scope.carlist=[];
$scope.checkselection = function () {
if ($scope.userSelect != "" && $scope.userSelect != undefined &&
$scope.selectCar != "" && $scope.selectCar != undefined )
{
$scope.list.push($scope.userSelect);
$scope.carlist.push($scope.selectCar);
}
Thanks in advance.
Here is the working plunkr
You have to modified you code as below
your factory should be like this
app.factory('Brandtest', function () {
var brand = {};
brand.sample =[
{
"id": 0,
"carName": "BMW"
},
{
"id": 1,
"carName": "Mercedes"
},
{
"id": 2,
"carName": "Honda"
}
];
brand.car =[
{
"id": 0,
"carType": "Suv",
"parentId": 0
},
{
"id": 1,
"carType": "Sedan",
"parentId": 1
},
{
"id": 2,
"carType": "Cope",
"parentId": 2
}
];
{
return brand;
}
});
In your HTML modify the code like below
<body ng-controller="selectDropdown">
Car Brand:
<select name="carname" ng-model="userSelect" ng-options="p.carName for p in a" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" ng-options="c.carType for c in b | filter:{parentId: userSelect.id}" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
<table>
<tr>
<th>Car Name</th>
<th>Car Model</th></tr>
<tr ng-repeat="carz in list track by $index">
<td>{{carz.carName}}</td>
<td>{{carlist[$index].carType}}</td>
</tr>
</table>
</body>
You have to maintain some co-relation between the 2 dropdowns. Better would be to have a single json object and use ng-options for populating the second dropdown based on value selected in first dropdown. Run the demo program below and you will get the point.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Select a car:</h1>
<select ng-model="x" ng-options="x for (x, y) in cars"></select>
<h1 ng-if="x">Category: </h1>
<select ng-if="x" ng-model="y" ng-options="y for y in x"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
"car01" : ["Ford", "BMW", "NISSAN"],
"car02" : ["Fiat", "Infinity"],
"car03" : ["Volvo", "Toyota"]
}
});
</script>
</body>
</html>

Reset Model Value On Cascaded DropDown Change

I have two drop downs .One to show departments and other to show sections on change of department .
<div class="row" ng-controller="cascaded as cas">
<div class="form-group">
<label for="select-department" class="control-label col-md-2">Department</label>
<div class="col-md-4">
<select id="select-department" class="form-control" name="department" ng-model="myModel.department"
ng-options="option.name for option in departments track by option.id">
<option value=""></option>
</select>
</div>
<label for="select-department" class="control-label col-md-2">Section</label>
<div class="col-md-4">
<select id="select-section" class="form-control" name="section" ng-model="myModel.section"
ng-options="option.name for option in sections track by option.id">
<option value=""></option>
</select>
{{myModel.section}}
</div>
</div>
</div>
It works fine for me . If I change department all respective section gets updated and if I select any section respective section also gets assigned to the model . But the problem is if second time I change my department value, section drop down gets updated the model value doesn't reset to blank . It still shows the last selected value .
var app = angular.module("mainApp", []);
angular.module("mainApp").controller("cascaded", function ($scope, $filter) {
$scope.departments = [
{
id: 1, name: "Dep A"
}, {
id: 2, name: "Dep B"
}, {
id: 3, name: "Dep C"
}];
var sections = [
{
id: 1, name: "Sec A", parentId: 1
}, {
id: 2, name: "Sec B", parentId: 2
}, {
id: 3, name: "Sec C", parentId: 3
}];
$scope.$watch("myModel.department", function (newVal) {
if (newVal) {
$scope.sections = $filter("filter")(sections, { parentId: newVal.id });
}
});
})
I want to reset my model value when section drop down gets refreshed with new data .
You need to assign the sections value to your mymodel.section value
$scope.myModel.section= $scope.sections;
Because $scope.myModel.section is does not update, when you changing the department,
Your watch event should be
$scope.$watch("myModel.department", function (newVal) {
if (newVal) {
$scope.sections = $filter("filter")(sections, { parentId: newVal.id });
**$scope.myModel.section= $scope.sections;**
}
});
Fiddler Demo
Simply put one method in ng-change of department like:
<select id="select-department" class="form-control" name="department" ng-model="myModel.department"
ng-options="option.name for option in departments track by option.id" ng-change="setBlank()">
<option value=""></option>
</select>
And in the method setBlank() set myModel.section to blank like this:
$scope.setBlank=function(){
$scope.myModel.section='';
}

angularjs dependant dropdown option value

i have successfully set up a dependant dropdown using angularjs, but i have a little problem:
i need to define the value of every option tag because it is set up automatically by angular processor.
here is my html code:
<div ng-controller="CountryCntrl">
<select id="country" ng-model="states" ng-options="country for (country, states) in countries">
<option value=''>Choose</option>
</select>
Departement:
<select id="state" ng-disabled="!states">
<option value="">Choose</option>
<option ng-repeat="state in states" value="{{state.id}}">{{state.dep}}</option>
</select>
</div>
<br/>
<input type="submit" value="go">
and here is my angularjs code:
<script>
var Aplic = angular.module("Aplic", []);
Aplic.controller('CountryCntrl', function($scope){
$scope.countries = {
'Aquitaine': [ {'id':'22', 'dep': "Dordogne"}, { 'id':'31', 'dep' : "Gironde"} ],
'Auvergne': [ {'id' : '3', 'dep' : "Allier"}, {'id' : '15', 'dep' : "Cantal"} ]
};
});
</script>
I repeat, i have successfully set up the value for the option in the second dropdown, but for the first one it takes automatically the name of variable country.
so how should i change my code to give every option tag in the first dropdown a specific value.
to understand well my idea, please inspect the values in every dropdown. here is my working snippet on plunker:
http://embed.plnkr.co/VBdxGDQNOJSHeGVfloo2/preview
any help will be appreciated.
here is what i want to do:
<select id="state" ng-model="cou">
<option value="">Choisir</option>
<option ng-repeat="cou in countries" value="{{cou.id}}">{{cou.name}}</option>
</select>
<select id="state" ng-disabled="!cou">
<option value="">Choisir</option>
<option ng-repeat="state in cou.states" value="{{state.id}}">{{state.dep}}</option>
</select>
but now the second dropdown does not work, if you can fiw that the problemwill be solved
Here is sample implementation for you. This will keep values in option tag.
<div ng-app="Aplic" ng-controller="CountryCntrl">
<select id="country" ng-model="selectedCountry" ng-options="country.id as country.name for country in countries track by country.id">
<option value="">Choose</option>
</select>Departement:
<select id="state"
ng-model="selectedState"
ng-disabled="!selectedCountry"
ng-options="state.id as state.dep for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id">
<option value="">Choose</option>
</select>
<div>selectedCountry id: {{selectedCountry}}</div>
<div>selectedState id: {{selectedState}}</div>
</div>
Controller:
$scope.countries =[
{
'id': '1',
'name': "Aquitaine",
'states': [{
'id': '22',
'dep': "Dordogne"
}, {
'id': '31',
'dep': "Gironde"
}]
},
{
'id': '2',
'name': "Auvergne",
'states': [{
'id': '3',
'dep': "Allier"
}, {
'id': '15',
'dep': "Cantal"
}]
}];
Working demo

put two values in ng model at Angularjs

I need to show current location storage or current employee wheres the inventory is at the moment
<select class=" form-control" ng-model="location.name">
<option value="">Choose Location</option>
<optgroup label="Locations">
<option value="{{location.resource_uri}}" ng-repeat="location in locations">{{location.name}}</option>
</optgroup>
<optgroup label="Holder">
<option value="{{user.resource_uri}}" ng-repeat="user in users">{{user.first_name + ' ' + user.last_name}}</option>
</optgroup>
</select>
Can I put in ng-model two values, so if location is not null, i get current Location, if the location is null , i get employee name selected.
Take a look at this
Working Demo
html
<div class="form-control" ng-app="main" ng-controller="Controller">
<select ng-model="category">
<optgroup ng-repeat="category in categories" label="{{ category.name }}">
<option ng-repeat="subCat in category.items">
<span ng-switch="category.name">
<span ng-switch-when="Location">
{{ subCat.name }}
</span>
<span ng-switch-when="Holder">
{{subCat.first_name+" "+subCat.last_name}}
</span>
</span>
</option>
</optgroup>
</select>
{{category}}
</div>
script
var main = angular.module('main', []);
// Main Controller
main.controller('Controller', function ($scope) {
$scope.categories = [{
id: 5,
name: "Locations",
items: [{
resource_uri: 'ABC',
name: "ABC-Name"
}, {
resource_uri: 'XYZ',
name: "XYZ-Name"
}, {
resource_uri: 'LMN',
name: "LMN-Name"
}, {
resource_uri: 'PQR',
name: "PQR-Name"
}]
}, {
id: 17,
name: "Holder",
items: [{
first_name: 'Manu',
last_name: 'Mathew'
}, {
first_name: 'Sunny',
last_name: 'Mathew'
}, {
first_name: 'Jacob',
last_name: 'Mathew'
}, {
first_name: 'Vijay',
last_name: 'Mathew'
}]
}];
});

Resources