I have following data for drop down in my controller.
$scope.groups={{"gpId": 3, "name" :"Tom"}, {"gpId": 32, "name" :"Helen"},{"gpId": 9, "name" :"Amy"}
$scope.user=
{
tkId: 32;
place: NW
}
In my html I have following select
<select ng-model="user.tkId" ng-options="a.gpId as a.name for a in groups track by a.gpId></select>
When I run this I get drop down with Helen selected but when i want to change the selection from drop down it doesn't let me.
Please let me know how I can change it to select other options so I can save it if needed. Thanks
The following snippet works.
First, an array of objects is written like this [{}, {}]
It's written in the angular docs that track by and as should not be used together.
Don't use select as and track by in the same expression. They're not designed to work together.
<body ng-app="selectExample">
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.groups = [{
"gpId": 3,
"name": "Tom"
}, {
"gpId": 32,
"name": "Helen"
}, {
"gpId": 9,
"name": "Amy"
}];
$scope.user = {
tkId: 32,
place: 'NW'
};
}]);
</script>
<div ng-controller="ExampleController">
<label>Group:
<select ng-model="user.tkId" ng-options="group.gpId as group.name for group in groups"></select>
</label>
<br/> {{user.tkId}}
</div>
</body>
Related
Once I use ng-options for a select I am unable to get dafault selection to work on nested json objects.
once I have a bit more complicated json and the select should handle a child object my select does not default select the proper value.
Given test = {"id":3,"title":"Test","product":{"id":4,"name":"Test1"}} as my ng-model test.product and
[{
"id": 4,
"name": "Test1"
}, {
"id": 5,
"name": "Test2"
}]
as my selection option. (see http://embed.plnkr.co/mpnislw77UBSEdHl4UKN/)
I seem to be unable to figure out how to facilitate default selection.
If you use track by item.id it works - http://embed.plnkr.co/mpnislw77UBSEdHl4UKN. The marked answer was not very obious since the ng-model is nested in iself. but it contains the correct information.
The only problem with your code is that you've assigned a new object to $scope.test.product and you're using it as the ng-model of the dropdown.
This makes AngularJS unable to find it inside the possible values, which are $scope.testarray. AngularJS will compare two objects by their reference, which you broke when you assigned a new object to $scope.test.product.
To make it working, change $scope.test as follows:
$scope.test = {
"id": 3,
"title": "Test",
"product": $scope.testarray[1]
}
This is how to select with ngOptions and setting a default value
Example
angular.module('defaultValueSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
};
}]);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
</body>
</html>
try this, hope it will help
<option value="" ng-if="false"></option>
I have the following example.json file:
[
{
"interests": [
{
"item": "art"
},
{
"item": "literature"
},
{
"item": "history"
},
{
"item": "science"
}
]
},
{
"experience": [
{
"year": "novice"
},
{
"year": "experienced"
}
]
}
]
and in my view controller, I read the file like this:
app.controller('ProfileCtrl', ["$scope", "$state", "$http",
function ($scope, $state, $http) {
$http.get('files/example.json').success(function (data)
{
$scope.myjsonobj= data;
});
and in my html view, I am injecting the values like this:
<div ng-controller="ProfileCtrl">
...
<select class="form-control" ng-model="user.favs">
<option ng-repeat="p in interests.myjsonobj" value="{{p.item}}">{{p.item}}</option>
</select>
question:
How can I show only the list of values of "interests" in my dropdown menu? How can I access the nested json array in angularjs?
my current setup is not working.
assuming 'interests' is your controller shortname.
you can use:
<option ng-repeat="p in myjsonobj[0].interests" value="{{p.item}}">{{p.item}}</option>
Ideally, you should loop the data object to find the index with the 'interests' key vs hardcoding [0].
update: removed "interests." from the repeat. doesn't seem like you have the ctrl shortname binding.
I'm not an angular guy. But with my javascript knowledge it seems to me that the
"interests.myjsonobj"
should be
"myjsonobj.interests"
I Have List of Object I am Iterating using ng-options inside select tag
For that list of object has empty value below I posted my sample data I highlighted that empty data also I posted my code .
JSON DATA:
$scope.dummyData = [
{
"id": "0a40f753-0919-4bb2-b64e-74a280695ac6",
"buildName": "JackPot",
"department": "",
"floor": "",
"roomno": "12345Room",
"wing": "TEST"
},
{
"id": "1ff0d1e3-c347-41ce-8b96-acb695bba7a8",
"buildName": "JackPot",
"department": "Dept",
"floor": "Testing",
"roomno": "123f",
"wing": "Test"
}
]
above JSON data has floor:"" empty value .
Code:
<select ng-model="buildNameng" ng-options="option.floor as option.floor for option in dummyData | unique:'buildName'" style="width:12%" ng-change="buildCh(buildNameng)">
<!-- You can have ONE default, null selection option.--
<option value="">---Building---</option>
</select>
If the $scope.dummyData Json floor has empty the dropdown automatically changed in to empty value. The problem here is if I am getting an Empty value Inside floor like above JSON .The ng-model="buildNameng" automatically populated that empty value even if that has one more not null value . The ng-model buildNamengautomatically Populated into empty data first . I dont Know How to control this ?
I know another way the above select tag in no-options change like this I got the output but purposefully I dont want like this .
ng-options="option.id as option.floor for option in dummyData | unique:'buildName'"
I need to control that empty data automatically populated in program thats the problem also. Please guide me I am searching a lot but I couldn't find
Iterate through the chosenCat array with a for loop and remove every array item that does not have a defined floor before displaying the data.
var dummyData = [
{
"id": "0a40f753-0919-4bb2-b64e-74a280695ac6",
"buildName": "JackPot",
"department": "",
"floor": "",
"roomno": "12345Room",
"wing": "TEST"
},
{
"id": "1ff0d1e3-c347-41ce-8b96-acb695bba7a8",
"buildName": "JackPot",
"department": "Dept",
"floor": "Testing",
"roomno": "123f",
"wing": "Test"
}
];
for(var i = 0; i < dummyData.length; i++) {
if (!dummyData[i].floor); {
dummyData.splice(i, 1);
}
}
$scope.dummyData = dummyData;
I guess you're using angular-filter, so you can simple use the angular-filter#removewith filter, as below:
removeWith: { floor: '' }
Take a look on this simple example:
(function() {
'use strict';
angular
.module('app', ['angular.filter'])
.controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.dummyData = [
{
"id":"0a40f753-0919-4bb2-b64e-74a280695ac6",
"buildName":"JackPot",
"department":"",
"floor":"",
"roomno":"12345Room",
"wing":"TEST"
},
{
"id":"1ff0d1e3-c347-41ce-8b96-acb695bba7a8",
"buildName":"JackPot2",
"department":"Dept",
"floor":"Testing",
"roomno":"123f",
"wing":"Test"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.9/angular-filter.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<select ng-model="buildNameng" ng-options="option.floor as option.floor for option in dummyData | unique: 'buildName' | removeWith: { floor: '' }">
<option value="">---Building---</option>
</select>
</body>
</html>
I hope it helps.
var foo = [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
},
{
"id": 4,
"name": "Test"
},
{
"id": 5,
"name": "Sample value"
},
{
"id": 6,
"name": "Testvalue"
}
];
I am trying to get a simple search input, which shows a couple of listings on ng-repeat. The search is basically a filter which shows searched items in that listing. What I have achieved is when I search something, with $http, it gets back the whole list of foo, and within that it filters. How can I just get the data with my keyword, and the whole JSON? For example if I search sample, how can I get the objects of id 3 and 5 so that I can display a new set of listings, or if I search with ID number 12, I get the object which has id as 12. The search term will be dynamic. I will be giving a $http call on every search as well.
Thanks.
If I understood well, it should work:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$scope.foo = [
{
"id":12,
"name":"Test"
},
{
"id":2,
"name":"Beispiel"
},
{
"id":3,
"name":"Sample"
},
{
"id":4,
"name":"Test"
},
{
"id":5,
"name":"Sample value"
},
{
"id":6,
"name":"Testvalue"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search" placeholder="Search">
<ul>
<li ng-repeat="item in foo | filter: search">
<span ng-bind-template="{{item.id}} - {{item.name}}"></span>
</li>
</ul>
</body>
</html>
Note: If you want to perform a $http request based on search input, look at this DEMO.
You can use $filter to achieve this.
function YourController($filter) {
var result = $filter('filter')(foo, {"id":3,"id":5});
};
You can iterate result later.
I am working with angular and semantic ui. I am trying to make a selection of Y and N through a select option. Basically i just want the first item was selected when the page show up. Tried many ways but i couldn't make it works.
Please take a look at this plunker.
angular.module('myapp', [])
.controller('testctrl', function ($scope){
$scope.add = {};
$scope.Consigns = [{value: 'N',label: 'N'}, {value: 'Y',label: 'Y'}];
$scope.add.consign = $scope.Consigns[0].label;
})
.controller('testctrl1', function ($scope){
$scope.add = {};
$scope.Consigns1 = [{value: 'N',label: 'N'}, {value: 'Y',label: 'Y'}];
$scope.add.consign1 = $scope.Consigns1[0].label;
});
https://plnkr.co/edit/cHcLd14xKFxLMS4uy0BM?p=preview
Print the model value in default placeholder. Rather than sending the label value in $scope.add.consign you could send the whole object and print whats required.
Working plunker: https://plnkr.co/edit/XeuiS7p3K1OOx5nHL9c5?p=preview
javascript:
$scope.ListOrder =
[
{ Name: "price", Id: 1 },
{ Name: "exist", Id: 2 },
{ Name: "Sale", Id: 3 },
{ Name: "New", Id: 4 }
];
$scope.Order = { Name: "exist", Id: 1 };
HTML:
<select ng-model="Order" ng-options="obj.Name for obj in ListOrder"></select>
Remove
<script>
$('.ui.dropdown').dropdown();
</script>
and also change select tag to this
<select ng-model="add.consign" class="ui fluid dropdown" ng-options="x.label as x.label for x in Consigns">
<option value=""></option>
</select>