I am working on an app where I am facing this similar issue. I am dynamically creating select boxes based on API response. I dont understand how to bind these values in controller. Code for reference is
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// how to get values of input boxes here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model= "What_Should_Go_Here" ng-repeat="x in [10,11,22,33]">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
{{What_Should_Go_Here}}
</div>
Initialize an empty object selected = {}
Then, loop the select boxes using ng-repeat, and inside each select box, use ng-options to get the options for the select.
Now, for each selected value from every select, ng-model="selected[y]" pushes the current select value into selected object with the key of select tag.
So, after selecting all the selects, the selected object looks loke,
{"1":11,"2":10,"3":22,"4":22}
Please run the below Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selected[y]" ng-options="x for x in data" ng-repeat="y in selects" ng-change="selectedFunc(y)">
</select>
<br><br>
Selected Values: {{selected}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selected = {};
$scope.selects = [1,2,3,4]
$scope.data = [10,11,22,33]
$scope.selectedFunc = function(y)
{
alert($scope.selected[y])
}
});
</script>
</body>
</html>
Here is a working DEMO
use a select box with ng-change method and pass the model value to that change function like below.....so that you can access the selected item in js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.array=[10,11,22,33];//assuem it as your db result
$scope.fix=function(val){
console.log(val);
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model= "x" ng-options="x as x for x in array" ng-change="fix(x)"</select>
{{x}}
</body>
</html>
Related
I have the following select:
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}">
<option ng-repeat="One_Language in Languages_List"
value="{{One_Language.Code}}"
ng-selected="One_Language.Code == current_Language">
{{One_Language.Name}}
</option>
</select>
Now, current_Language is a $rootScope variable with a value (e.g. "EN"). I want the select element to display the selected value instead of the very first. What am I doing wrong?
One more note: I know that I could use ng-click, but I don't think this is the source of the issue.
Thanks.
Check this snippet:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $rootScope) {
$scope.Labels = {Change_Language_Tooltip: "change lang"};
$scope.Languages_List = [
{ name: 'English', Code: 'en' },
{ name: 'Espanol', Code: 'es' },
{ name: 'Italian', Code: 'it' }];
$rootScope.current_Language = $scope.Languages_List[1];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>selected item is : {{current_Language}}</p>
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}"
ng-options="item.name for item in Languages_List track by item.Code"
ng-model="current_Language">
</select>
</body>
</html>
PS: the selected item (default or initial) must be one element of the items used in the ngOptions list
I am using ng-repeat to simple put down options from an array. Though, I hope I am doing it alright I am not able to see any options in the dropdown of select options. Can someone help me find the error?
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.Country = [
"India","Pakistan","Germany"
];
});
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in Country"></option>
</select>
</body>
</html>
Try this:::
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model ="selectedCountry">
<option ng-repeat="x in Country" value = "{{x}}"> {{x}} </option>
</select>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.Country = [
"India","Pakistan","Germany"
];
});
</script>
</body>
</html>
You are actually not printing any value into option element, you should try like below.
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in Country" value="{{x.id}}">{{x.name}}</option>
</select>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.Country = [
{"id":"1","name":"India"},
{"id":"2","name":"Pakistan"},
{"id":"3","name":"Germany"}
];
});
</script>
</body>
</html>
Use ng-options instead of using ng-repeat with select tag:
<select ng-options="x for x in country" ng-model="selectedCountry"> </select>
yes you didn't use {{x}} this value that is the reason it's not working for you , it may be ng-options or option anything any thing you can use ...
Use ng-options instead of using ng-repeat with select tag:
My solution is tested and valided:
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-options="option.name for option in Country track by option.id" ng-model="selectedCountry">
<option value="">All</option>
</select>
ID: {{selectedCountry.id}} and NAME: {{selectedCountry.name}}
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.selectedCountry="";
$scope.Country = [
{"id":"1","name":"India"},
{"id":"2","name":"Pakistan"},
{"id":"3","name":"Germany"}
];
});
</script>
</body>
</html>
DEMO in Plunker
I have a unique problem with ng-select. I have multiple select boxes populated with the same $scope.list (this is an important requirement).
The items can be selected only once in series of dropdowns. I am not able to implement this - since deleting the $scope.list removes the item from the previous select box.
<div ng-repeat="element in anotherList">
<select ng-options="o for o in list" ng-model="abc" required>
</div>
I ended up using ng-repeat with ng-disabled
App.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.b = [1, 2, 3];
$scope.list = ["Quora", "SOf", "Wikipedia", "Google", " Wolfram Alpha"];
$scope.isDisabled = {
"Quora": false,
"SOf": false,
"Wikipedia": true,
"Google": false,
"Wolfram Alpha": false
};
$scope.updateDisabled = function(model){
$scope.isDisabled[model] = !$scope.isDisabled[model];
}
});
Index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div class="container" ng-repeat="a in b">
<select class="select"
ng-model="abcd"
ng-change="updateDisabled(abcd)"
>
<option value="">Choose unique</option>
<option
ng-repeat="o in list"
ng-disabled="isDisabled[o]"
>{{o}}</option>
</select>
</div>
</body>
</html>
Here is the plunkr
So I can't really get this to work, I've got the following code
HTML:
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
{{vt.t}}
<div my-directive="{{vt.t}}"></div>
{{vt.f}}
<div my-directive="{{vt.f}}"></div>
<hr />
{{vt.t}}
<div ng-class="{'my-directive': vt.t}"></div>
{{vt.f}}
<div ng-class="{'my-directive': vt.f}"></div>
<hr />
<div class="my-directive"></div>
<div class="nodirectiveclass"></div>
</body>
</html>
JavaScript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.vt = { t: true, f: false };
});
app.directive('myDirective', function($compile) {
return {
restrict: 'AC',
template: '<div>Directive on</div>',
replace: true
};
});
Plunker: http://plnkr.co/edit/7cJKhIuNqnsk1CkczjoE?p=preview
As you see the classes doesn't trigger the directive when added dynamically but works fine in my last "static" example. I also tried setting the directive attribute to true or false but that didn't seem to help.
I think you should use model variable in your directive. Then you can access what ever the value you want easily.
Refer this Answer:
AngularJS - Create a directive that uses ng-model
When I select an item that is not the first one in the list, IE11 on Windows 7/8 shows the first. If I re-select, the problem goes away. It only occurs once after the page load. I have not tested in older versions of IE.
I tried the code with older versions of AngularJS as well. Same code behaves as expected in Chrome.
Is this a problem with IE or is there a known workaround for this? Or is it a problem with the code?
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/2.2.9/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select data-ng-model="selecteditem" data-ng-options="item for item in items"></select>
</body>
</html>
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.selecteditem = "";
});
Setting selected item value doesn't seem to work for array of objects.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select data-ng-model="selecteditem" data-ng-options="item.name for item in items"></select>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [{name:'item1'}, {name:'item2'}, {name:'item3'}];
$scope.selecteditem = {name:'item1'};
});
Here is the showing the behavior http://plnkr.co/edit/ojAhTP50iHS030tezhQ3
Is that solution for you please see her:http://plnkr.co/edit/imjLXBmGpZReZ63KNWlg?p=preview ?
<select data-ng-model="selecteditem" data-ng-options="item for item in items">
<option style="display:none" value=""></option>
</select>
In case you want to use array of objects you need to initialize selected option by reference to the same object
app.controller('MainCtrl', function($scope) {
$scope.items = [{name:'item1'}, {name:'item2'}, {name:'item3'}];
$scope.selecteditem = $scope.items[0];
});
please see plnkr