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
Related
So I have angular code like this
<select class="form-control" ng-model="ctrl.selectedProvider">
<option value="">Please select a provider</option>
<option ng-repeat="provider in ctrl.providers" ng-value={{provider.id}}>
{{provider.description}}
</option>
</select>
The data is like this
providers = [{
id: 1,
description: provider1
},{
id: 2,
description: provider2
}]
If there's only have one element in ctrl.providers, I want to set the default value of the select tag to this provider. Otherwise, I want to keep it to "Please select a provider" and let the user select the provider he wants. I have googled that and found ng-init, but I think it's not useful for my case. Any ideas? Thanks
I think what you have will work, just need to adjust your code a little: (Example below)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var ctrl = this;
// Uncomment to see result
//ctrl.selectedProvider = null;
//ctrl.selectedProvider = "";
ctrl.selectedProvider = 1;
//ctrl.selectedProvider = 2;
ctrl.providers = [{
id: 1,
description: "provider1"
},{
id: 2,
description: "provider2"
}];
});
<!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.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<select class="form-control" ng-model="ctrl.selectedProvider">
<option value="">Please select a provider</option>
<option ng-repeat="provider in ctrl.providers" ng-value={{provider.id}}>
{{provider.description}}
</option>
</select>
</body>
</html>
Use ng-options to create the <option> tags and check data length to assign model if applicable
angular.module('app', [])
.controller('MainCtrl', function() {
this.providers = [{
id: 2,
description: 'provider2'
}];
if (this.providers.length === 1) {
this.selectedProvider = this.providers[0]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<div ng-app="app" ng-controller="MainCtrl as ctrl">
<select class="form-control"
ng-model="ctrl.selectedProvider"
ng-options="o.id as o.description for o in ctrl.providers track by o.id">
<option value="">Please select a provider</option>
</select>
</div>
I want to be able to reference a variable in an Angular template that is built up on another variable with a filter.
So for example, I might have this in the controller:
$scope.EuropaLeague = true;
If I do this in the template it works as expected:
<div ng-if="EuropaLeague">
</div>
But what if I wanted to dynamically populate the ng-if with something coming from an ng-repeat e.g.
{{item.leagueName | myFilter}}
So the above would reference my scope variable $scope.EuropaLeague E.g. True or False?
Thanks
Here is working code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.leagues =
[
{
"id": 1,
"name": "ChampionsLeague",
},
{
"id": 2,
"name": "EuropaLeague",
},
{
"id": 3,
"name": "FACup",
}
]
$scope.obj = {};
$scope.obj['EuropaLeague'] = false;
$scope.obj['FACup'] = false;
$scope.obj['ChampionsLeague'] = true;
});
<!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.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="item in leagues" ng-if="item.name">
<li ng-if="obj[item.name]">{{item.name}}</li>
</ul>
</body>
</html>
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>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [1,2,3,4];
$scope.results = {};
$scope.showButton = function () {
for (var key in $scope.results) {
if ($scope.results[key]) {
return true;
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!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.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input value="{{d}}" type="checkbox"/>
check this to check all checkbox and show the button
<br><br>
<li ng-repeat="d in data"><input ng-model="results[$index]" value="{{d}}" type="checkbox"/>{{$index}}</li>
<button ng-show="showButton()">Submit</button>
</body>
</html>
My code above bind each of the checkbox and show the save button if any of them got checked, but now I having problem implementing the main checkbox, which will check all of the checkbox and show the button.
http://plnkr.co/edit/goVQtYxjgo8fA15oSGuy?p=preview
Check working demo: Plunker.
Add a new checkbox:
<input type="checkbox" ng-change="toggleCheckAll()" ng-model="allChecked" />
check this to check all checkbox and show the button
Everytime you check/uncheck this chechbox, the function toggleCheckall will be invoked. In the controller:
$scope.allChecked = false;
$scope.toggleCheckAll = function () {
for (var key in $scope.results) {
$scope.results[key] = $scope.allChecked;
}
};
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