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.
Related
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>
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!
I am using ng-if to try to filter out the cities based on the selected state. For some reason, the city select box disappears when a state is selected.
var app = angular.module('App', ['angular.filter']);
app.controller("Ctrl", function($scope) {
$scope.message = "Choose a Popular City";
$scope.data = [
{ city: 'New York', state: 'New York', population: 8175133 },
{ city: 'Los Angeles', state: 'California', population: 3792621 },
{ city: 'Chicago', state: 'Illinois', population: 2695598 },
{ city: 'Huston', state: 'Texas', population: 2099451 },
{ city: 'Philadelphia', state: 'Pennsylvania', population: 1526006 },
{ city: 'Phoenix', state: 'Arizona', population: 1445632 },
{ city: 'San Antonio', state: 'California', population: 1327407 },
{ city: 'San Diego', state: 'California', population: 1307402 },
{ city: 'Dallas', state: 'Texas', population: 1197816 },
{ city: 'San Jose', state: 'California', population: 945942 }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body ng-app="App">
<div ng-controller="Ctrl" class="container">
<h1>{{message}}</h1>
<form>
<div class="form-group">
<label>Country</label>
<select name="state" class="form-control"
ng-model="state"
ng-init="state = state || options[0]"
ng-options="option.state for option in data|unique:'state'|orderBy:'state'">
</select>
</div>
<div class="form-group">
<label>City</label>
<select name="city" class="form-control"
ng-model="city"
ng-options="option.city for option in data"
ng-if="option.state == state"
ng-disabled="!country">
</select>
</div>
<br />
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
Data via: Largest cities in the United States by population by decade, Wikipedia.
You have issue with your city dropdown, change the code to
<select name="city" class="form-control"
ng-model="city"
ng-options="option.city for option in data |filter:state.state"
ng-disabled="!state">
</select>
there is nothing like country, your model is state
ng-disabled="!country"
ng-if is used to conditional render, what you want to achieve with this is not clear
ng-if="option.state == state"
Try like this to see if it works, dont have time to test it.
<select name="city" class="form-control" ng-model="city" ng-if="option.state == state" ng-disabled="!country">
<option ng-repeat="option.city for option in data"
value="{{option.city}}" ng-if="option.state == state">
{{option.city}}
</option>
</select>
Hope it helps :)
Try something like this.
<select name="city" class="form-control"
ng-model="city"
ng-options="option.city for option in data | filter:{ city : state }"
ng-disabled="!country">
</select>
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'
}]
}];
});
I need a way to order a list by its properties.
I have this plunker: http://jsfiddle.net/Tropicalista/aF2aL/1/
but don't know hoe to proceed. I need a way to order the list based on what I select in checkboxes...
function myCtrl($scope){
$scope.friends = [
{
name: "Michael",
gender: "Male",
hair: "Brunette"
},
{
name: "George Michael",
gender: "Male",
hair: "Brunette"
},
{
name: "Gob",
gender: "Male",
hair: "Brunette"
},
{
name: "Tobias",
gender: "Male",
hair: "Black"
},
{
name: "Lindsay",
gender: "Female",
hair: "Blonde"
},
{
name: "Maeby",
gender: "Female",
hair: "Black"
}
];
$scope.orderBy = function(target){
$scope.groups = _.groupBy($scope.friends, target);
}
$scope.activeGroups = {};
}
And this is my html:
<input type="checkbox" ng-click="orderBy('name')" />Name
<input type="checkbox" ng-click="orderBy('gender')" />Gender
<input type="checkbox" ng-click="orderBy('hair')" />Hair
<div data-ng-repeat="(myFilter, users) in groups">
<h2>{{myFilter}}</h2>
<ul>
<li data-ng-repeat="user in users">
{{ user.name }}
</li>
</ul>
</div>
First, for something like this, I much prefer using a radio instead of a checkbox. It is semantically correct. Check boxes indicate that you can group by more than one field, and it doesn't appear, from your question, that you are trying to do that.
Knowing that, you can define your radios like this:
<input type="radio" ng-model="grouping" value="name" />Name
<input type="radio" ng-model="grouping" value="gender" />Gender
<input type="radio" ng-model="grouping" value="hair" />Hair
Now, you can just tell your ng-repeat to group based on a groupedFriends collection:
<div data-ng-repeat="(group, users) in groupedFriends">
<h2>{{group}}</h2>
<ul>
<li data-ng-repeat="user in users">
{{ user.name }}
</li>
</ul>
</div>
And then your controller just watches the grouping variable and group the data:
$scope.$watch('grouping', function() {
$scope.groupedFriends = _.groupBy($scope.friends, $scope.grouping);
});
$scope.grouping = "gender";
Here is a working fiddle.
STEVE HOLT!
You can use groupBy of angular.filter module, It's easy to use, and actually more fast than lodash implementation see: link.
Usage: (key, val) in collection | groupBy: 'property' or nested.property
here's an example:
JS:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
HTML:
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
RESULT:
Group name: alpha
* player: Gene
Group name: beta
* player: George
* player: Paula
Group name: gamma
* player: Steve
* player: Scruath
UPDATE: jsbin