put two values in ng model at Angularjs - 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'
}]
}];
});

Related

Can't add src img to $scope.data

I want to be able to select a person, and when selected, I see his values(name, tel, email, ..):
html :
<td class="leftAlign">
<span class="nullable">
<select ng-model="data.selectedPerson" ng-options="x.name for x in persons">
<option value="">-- Person --</option></select>
<br><br>
{{data.selectedPerson.name}}<br>
{{data.selectedPerson.Addrstr1}}<br>
{{data.selectedPerson.Tel}}<br>
{{data.selectedPerson.Mail}}<br>
<img data-ng-src="{{data.selectedPerson.img}}">
</span>
</td>
It works fine, I can see all the values of the person, and the img too. To reset everything in my html form I have a reset button, with the JS:
$scope.reset = function() {
$scope.data = {};
};
however, I can't erase the img.
in the JS, the persons values are in the array :
$scope.person = [
{name : "MrPerson1",
Addrstr1:"59 road",
Tel: "0234225163",
Email : "direction#gmail.com ",
img : "images/person1.PNG",
}];
Could you help me please?
Check this example, you are removing the data but not the ng-model of the <select>
var Controller = function() {
var vm = this
vm.persons = [{
name: "MrPerson1",
Addrstr1: "59 road",
Tel: "0234225163",
Email: "direction#gmail.com ",
img: "https://lh3.googleusercontent.com/-crlUFIoyB3k/UdzsGwV__AI/AAAAAAAAAXs/ErA8XESRgwk/5LsFP.gif",
}, {
name: "MrPerson2",
Addrstr1: "59 road",
Tel: "0234225163",
Email: "direction#gmail.com ",
img: "https://lh3.googleusercontent.com/-Ta_b7Z96-mE/Ud2hTqB-84I/AAAAAAAABEQ/BPY_MIbLitc/SausageDogAnimation.gif",
}, {
name: "MrPerson3",
Addrstr1: "59 road",
Tel: "0234225163",
Email: "direction#gmail.com ",
img: "https://www.gravatar.com/avatar/e27096ea0e246d04139047d40ff566d2?s=32&d=identicon&r=PG",
}];
vm.data = vm.persons
vm.reset = function() {
vm.data.selectedPerson = {}
};
};
angular
.module('app', [])
.controller('Controller', Controller);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller as vm">
<button ng-click="vm.reset()">Reset</button>
<select ng-model="vm.data.selectedPerson" ng-options="x.name for x in vm.data">
<option value="">-- Person --</option>
</select>
<br><br> {{vm.data.selectedPerson.name}}
<br> {{vm.data.selectedPerson.Addrstr1}}
<br> {{vm.data.selectedPerson.Tel}}
<br> {{vm.data.selectedPerson.Mail}}
<br>
<img ng-if="vm.data.selectedPerson.img" ng-src="{{vm.data.selectedPerson.img}}" />
</div>

Angular JS - Select option select option by value id

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>

Angularjs Select options issue

I'm new to angularjs. what i'm trying to do is this when i select an options from selectbox1 and selectbox2 value changes according to that value from selectbox1.
For Example: if the user choose Frontend from selectbox1 and selectbox2 need to display values are 'css, jquery, html, angularjs', but here when i choose any options from selectbox1. it display 'php, ruby, c#, python', any idea what i'm doing wrong. please help me.
angular.module("ctrl", [])
.controller("appsctrl", function ($scope) {
$scope.data = {
frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }],
Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }]
};
$scope.selectvalues = function () {
angular.forEach($scope.data, function (value, key) {
$scope.values = value;
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select" ng-change=selectvalues()>
<option value="">Select</option>
<option value="FrontEnd">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list">
<option value="">Select</option>
<option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option>
</select>
</div>
</div>
It should be like this.
you have some problems.
The option value for first select tag was incorrect.
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
angular.module("ctrl", [])
.controller("appsctrl", function($scope) {
$scope.data = {
"frontend": [{
id: 1,
name: 'css'
}, {
id: 2,
name: 'jquery'
}, {
id: 3,
name: 'html'
}, {
id: 4,
name: 'angularjs'
}],
"Server": [{
id: 1,
name: 'php'
}, {
id: 2,
name: 'ruby'
}, {
id: 3,
name: 'c#'
}, {
id: 4,
name: 'python'
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select">
<option value="">Select</option>
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list" ng-options="value.id as value.name for value in data[select]">
<option value="" style="display:none">Select</option>
</select>
</div>
</div>
Try this. Change the value of select option, from FrontEnd to frontend. and now on changing the select option, the ng-model for your select will be frontend or Server and on the controller use $scope.values = $scope.data[$scope.select] in your change event. That will solve your issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select" ng-change=selectvalues()>
<option value="">Select</option>
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list">
<option value="">Select</option>
<option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option>
</select>
</div>
</div>
<script type="text/javascript">
angular.module("ctrl", [])
.controller("appsctrl", function ($scope) {
$scope.data = {
frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }],
Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }]
};
$scope.selectvalues = function () {
$scope.values = $scope.data[$scope.select];
}
});
</script>
</body>
</html>

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!

Not working ng-options in SELECT

I am trying to populate States in Select with ng-options. As i am new to angular, result doesn't come as expected.
Controller
$scope.statesList = function () {
StatesList.query(function (states) {
$scope.states = states;
});
};
Html
<td data-ng-init="statesList()">
<select ng-model="practiceAdd.state" name="state{{$index+1}}" ng-class="{'has-error': editForm.{{$index+1}}.$invalid}"
ng-options="state in states" required>
</select>
</td>
Array
$$hashKey: "05S"
_id: "53107e099d985dc404000015"
city: "mumbai"
country: "india"
state: "AR"
street: "1"
zipcode: 42101
Try like This..
In HTML
<select name="countries" id="countries" ng-model="countryCode" ng-options="country.code as country.name for country in countries"></select>
In angular JS Code
$scope.countries = [
{
name: 'Poland',
code: 'PL'
},
{
name: 'United Kingdom',
code: 'UK'
},
{
name: 'United States of America',
code: 'USA'
}
];
$scope.countryCode = 'UK';
Working Exaple
In your Example ;
<td>
<select ng-model="state.Id" name="state{{$index+1}}" ng-options="state.Id as state.name for state in states" required>
</select>
</td>
State id and state name should be defined by you.

Resources