I'm struggling to understand how ng-options works with a data source. I've read the docs and I feel like I'm doing exactly what is required, but I still get problems when attempting.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
angular.module('app', [])
.controller('IndexCtrl', ['$scope', function($scope) {
$scope.types = {
1: "value1",
2: "value2",
5: "value3"
};
}]);
</script>
</head>
<body ng-controller="IndexCtrl">
<select ng-model="type" ng-options="k as v for(k, v) in types">
<option value="">Select Type</option>
</select>
</body>
</html>
I always get this error in the console:
Error:
Expected ngOptions in form of 'select (as label)? for (key,)?value in collection (track by expr)?' but got 'k as v for(k, v) in types'.
What am I doing incorrectly?
See plunkr here:
http://plnkr.co/edit/Bl6u4151KyDkxhYrsdCm?p=preview
This is kind of strange, but it seems like you need to put a space after for. This works:
<select ng-model="type" ng-options="k as v for (k, v) in types">
<option value="">Select Type</option>
</select>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mc1">
<label class="control-label">Semester:</label>
<select ng-model="selectedSemesters" ng-change="selectedSemesterChanged()" class="form-control">
<option value="{{v.SemesterId}}" ng-repeat="v in semesters">{{v.SemesterId}}</option>
</select>
<script>
var app=angular.module('myApp',[]);
app.controller('mc1',function($scope)
{
$scope.semesters='[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]';
})
</script>
</body>
</html>
When I run this page, I get the error error: [ngRepeat:dupes]. I tried to add track by $index but it totally doesn't work.
Can anyone tell me the reason?
Edit: Sorry I didn't explain clear. I use library in C# to convert a datatable object to json string. Then pass this to the web page through web api. In the script, I use angular.jsonFrom(response.data).
And response in browser is "[{\"SemesterId\":\"Fall 2017\"},{\"SemesterId\":\"Spring 2017\"}]". I have fixed the bug but I don't know why.
Thanks all. PS. Correct answer is followed.
<body ng-app="mySelect" ng-controller="myCt">
<select ng-model="mySelected1">
<option ng-repeat="x in data1">{{x.SemesterId}}</option>
</select>
<select ng-model="mySelected2" ng-options="x.SemesterId for x in data1">{{x.SemesterId}}</select>
<label ng-model="data1"></label>
<script>
var app = angular.module('mySelect', []);
app.controller('myCt', ['$scope', function ($scope) {
$scope.data1=angular.fromJson('[{\"SemesterId\":\"Fall 2017\"},{\"SemesterId\":\"Spring 2017\"}]');
}]);
</script>
</body>
You are passing string instead of array. So ng-repeat shows error when iterating.
Change below line;
$scope.semesters='[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]';
To
$scope.semesters=[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}];
JSFiddle Demo
Please see this Plunkr working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mc1">
<label class="control-label">Semester:</label>
<select ng-model="selectedSemesters" ng-change="selectedSemesterChanged()" class="form-control">
<option value="v.SemesterId" ng-repeat="v in semesters track by $index">{{v.SemesterId}}</option>
</select>
<script>
var app=angular.module('myApp',[]);
app.controller('mc1',function($scope)
{
$scope.semesters=[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}];
})
</script>
</body>
</html>
https://jsbin.com/fuvihatihi/1/edit?html,output
There was nothing to repeat in your semester variable, because there was quotes around array declaration.
This question already has answers here:
Remove Blank option from Select Option with AngularJS
(12 answers)
Closed 5 years ago.
I have a queation to AngularJS Guru. Is it possibile to remove blank value from next listing where klassList is some list of objects. I need
exactly ng-repeat and not ng-options [{"id":1,"klassName":"11A","pupils":null},{"id":2,"klassName":"12B","pupils":null}] :
<input type="text" class="form-control" ng-model="klassName1"/>
<select class="form-control" ng-model="selectedItem" >
<option ng-repeat="klass in klassList | filter : {klassName : klassName1}">{{klass.klassName}}</option>
</select>
My target is to obtain dropdown list with possibility of filtering values.
Use ng-options
ng-options="givendata as givendata .klassName for givendata in klassList"
angular.module('app', []).controller('SelectorCtrl', function($scope) {
$scope.klassList = [{"id":1,"klassName":"11A","pupils":null},{"id":2,"klassName":"12B","pupils":null}];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="SelectorCtrl">
<h1>Hello!</h1>
<select class="form-control" ng-model="selectedItem" id="state" ng-model="divisionsSource" ng-options="givendata as givendata.klassName for givendata in klassList">
<option value=''>Select</option>
</select>
</body>
</html>
I am using Angular Js v1.6.1. I used following code to generate select list
<select class="form-control" ng-model="selectedLocation">
<option ng-repeat="item in locations" value="{{item}}">
{{item}}
</option>
</select>
In Google chrome I am getting results as excepted as shown in image below.
But in firefox, I got the following results
There is blank after select location in firefox. How to resolve this issue?
Location Object:
Bootstrap Version: 3.3.7
FireFox version: 51.0.1 (32-bit)
It is not recommended way to use ng-repeat in options if you want to generate options dynamically.
Try ng-options instead.
Can you check the below and let me know if the problem still persist ?.
(function() {
'use strict';
angular.module('myApp', []);
angular.module('myApp').controller('MainCtrl', ['$scope',
function($scope) {
$scope.locations = ['Farm1', 'Farm2', 'All'];
}
]);
}());
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<div>Select Item</div>
<select class="form-control" ng-init="selectedLocation= locations[0]" ng-model="selectedLocation" ng-options="item as item for item in locations" style="width:150px">
</select>
<div>Selected item: {{selectedLocation}}</div>
</body>
</html>
Here I used same version but I don't have any problem . plunker here and image here
// Code goes here
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.locations = ['Farm1', 'Farm2', 'All'];
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="angular.js#1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<div>Select Item</div>
<select class="form-control" ng-model="selectedLocation">
<option ng-repeat="item in locations" value="{{item}}">
{{item}}
</option>
</select>
<div>Selected item: {{selectedLocation}}</div>
</body>
</html>
Question :The following ng-option code is not working i not able to identify error
Code:
<html>
<head>
<title>
This is example of ng-option
</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var ngOption = angular.module("ngOptionApp",[]);
ngOption.controller("ngOptionController",function($scope){
$scope.data = ["Maharashtra","Panjab","Rajsathan","Gujrat","Karnatakka","Kerala"];
});
</script>
</head>
<body ng-app = "ngOptionApp" ng-controller = "ngOptionController">
<select ng-model = "xyz" ng-option = "x for x in data">
</select>
</body>
</html>
ng-option should be ng-options
<html>
<head>
<title>
This is example of ng-option
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var ngOption = angular.module("ngOptionApp", []);
ngOption.controller("ngOptionController", function($scope) {
$scope.data = ["Tamil Nadu","Maharashtra", "Panjab", "Rajsathan", "Gujrat", "Karnatakka", "Kerala"];
});
</script>
</head>
<body ng-app="ngOptionApp" ng-controller="ngOptionController">
<select ng-model="xyz" ng-options="x for x in data">
</select>
</body>
</html>
Here is my html part
<select style="width:250px; height:50px">
<option ng-model="sellerDetails" ng-click="sellerValue(sellerDetails)" >seller 1</option>
<option >seller 2</option>
<option >seller 3</option>
</select>
here is my controller part
$scope.sellerValue= function(sellerDetails){
console.log("invoking sellerValue");
console.log(sellerDetails);
}
what is wrong i am doing here
i am not even invoking the controller part of my sellervalue funtion
There are some points:
Point 1: You've placed the ngModel in <option>, while it should be in <select> tag.
Point 2: ngClick is used to trigger, obviously click, it isn't the correct directive that you should use in this case, because a click doesn't mean that you changed the value of that field. The correct one is ngChange that detects real changes.
Point 3: Since you already have the value of selected item stored in $scope.sellerDetails you don't need to pass it as parameter to your function.
Point 4: I recommend you to use ngOptions instead of doing it statically.
See it working:
(function() {
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.sellers = [];
function loadSellers(max) {
for (var i = 1; i <= max; i++) {
$scope.sellers.push("Seller " + i);
}
}
loadSellers(3);
$scope.sellerValue = function() {
console.log("sellerValue: ", $scope.sellerDetails);
}
}
})();
.select-field {
width: 250px;
height: 50px
}
<!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">
Statically:
<select class="select-field" ng-model="sellerDetails" ng-change="sellerValue()">
<option>seller 1</option>
<option>seller 2</option>
<option>seller 3</option>
</select>
<hr>
With ng-options:
<select class="select-field" ng-options="seller for seller in sellers" ng-model="sellerDetails" ng-change="sellerValue()">
<option value="" disabled hidden>Select a seller</option>
</select>
</body>
</html>
I hope it helps!!
Try this ,
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.sellerDetails = 'seller 1';
$scope.sellerValue= function(sellerDetails){
console.log("invoking sellerValue");
console.log(sellerDetails);
}
});
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<select style="width:250px; height:50px" ng-model="sellerDetails" ng-click="sellerValue(sellerDetails)">
<option >seller 1</option>
<option >seller 2</option>
<option >seller 3</option>
</select>
</body>