I'm new to angularjs. what i'm trying to do is this when i select an options from selectbox1 and selectbox2 value changes according to that value from selectbox1.
For Example: if the user choose Frontend from selectbox1 and selectbox2 need to display values are 'css, jquery, html, angularjs', but here when i choose any options from selectbox1. it display 'php, ruby, c#, python', any idea what i'm doing wrong. please help me.
angular.module("ctrl", [])
.controller("appsctrl", function ($scope) {
$scope.data = {
frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }],
Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }]
};
$scope.selectvalues = function () {
angular.forEach($scope.data, function (value, key) {
$scope.values = value;
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select" ng-change=selectvalues()>
<option value="">Select</option>
<option value="FrontEnd">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list">
<option value="">Select</option>
<option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option>
</select>
</div>
</div>
It should be like this.
you have some problems.
The option value for first select tag was incorrect.
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
angular.module("ctrl", [])
.controller("appsctrl", function($scope) {
$scope.data = {
"frontend": [{
id: 1,
name: 'css'
}, {
id: 2,
name: 'jquery'
}, {
id: 3,
name: 'html'
}, {
id: 4,
name: 'angularjs'
}],
"Server": [{
id: 1,
name: 'php'
}, {
id: 2,
name: 'ruby'
}, {
id: 3,
name: 'c#'
}, {
id: 4,
name: 'python'
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select">
<option value="">Select</option>
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list" ng-options="value.id as value.name for value in data[select]">
<option value="" style="display:none">Select</option>
</select>
</div>
</div>
Try this. Change the value of select option, from FrontEnd to frontend. and now on changing the select option, the ng-model for your select will be frontend or Server and on the controller use $scope.values = $scope.data[$scope.select] in your change event. That will solve your issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select" ng-change=selectvalues()>
<option value="">Select</option>
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list">
<option value="">Select</option>
<option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option>
</select>
</div>
</div>
<script type="text/javascript">
angular.module("ctrl", [])
.controller("appsctrl", function ($scope) {
$scope.data = {
frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }],
Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }]
};
$scope.selectvalues = function () {
$scope.values = $scope.data[$scope.select];
}
});
</script>
</body>
</html>
Related
<div class="district-list" ng-repeat="office in offices | filter : {'DisplayOffice' : officeLocationLevelList.searchText}|limitTo:1">
Have a multilevel list of data. depending on the condition i want to filter the data.(First Level/ inner level). If the first level is selected then i have to search with one json attribute and if the inner level is selected then search with another json attribute. I have set it in a scope variable. How can use scope variable instead of 'DisplayOffice'
you can bind a function to filter which returns the filter condition using scope variables.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.data = [
{
id: 1,
name: 'name1'
},{
id: 2,
name: 'name2'
},{
id: 3,
name: 'name3'
},{
id: 3,
name: 'aaaaa'
}
];
$scope.getCondition = function() {
var obj = {};
obj[$scope.key] = $scope.value;
return obj;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
Key: <input type="text" ng-model="key">
Value: <input type="text" ng-model="value">
<div ng-repeat="item in data | filter: {[key]:value}">
{{item.name}}
</div>
</div>
and there is another way while using ES6' new feature {[key]: value}, but this may now work for some browsers.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.$watch("key", function() {
console.log({[$scope.key]:$scope.value});
});
$scope.$watch("value", function() {
console.log({[$scope.key]:$scope.value});
});
$scope.data = [
{
id: 1,
name: 'name1'
},{
id: 2,
name: 'name2'
},{
id: 3,
name: 'name3'
},{
id: 3,
name: 'aaaaa'
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
Key: <input type="text" ng-model="key">
Value: <input type="text" ng-model="value">
<div ng-repeat="item in data | filter: {[key]: value}">
{{item.name}}
</div>
</div>
I have the following:
http://jsfiddle.net/Qgmz7/119/
I am trying to keep track of what is selected and what is not, how do I go about doing this?
<div ng-app>
<div ng-controller="cCtrl">
<select multiple ng-model="campaign" ng-options="c.ID as c.Name for c in campaigns">
<option ng-selected="c.Selected" value="">-- choose campaign --</option>
</select>
<ul>
<li ng-repeat="item in campaigns">{{item.Name}} - {{item.Selected}}</li>
</ul>
</div>
</div>
function cCtrl($scope) {
$scope.campaigns = [
{Selected:true, ID: 1, Name:"James"},
{Selected:false, ID: 2, Name:"James"},
{Selected:true, ID: 3, Name:"James"},
];
}
Hi try this http://jsfiddle.net/a63k106s/
function cCtrl($scope) {
$scope.campaigns = [
{Selected:true, ID: 4, Name:"James"},
{Selected:false, ID: 2, Name:"James"},
{Selected:true, ID: 3, Name:"James"},
];
$scope.$watch('campaign', function (nowSelected) {
angular.forEach($scope.campaigns, function(campaign) {
campaign.Selected = nowSelected.indexOf(campaign.ID) >= 0
});
});
}
Simple problem, probably discussed many times, but I can't find a proper solution on this simple issue.
The problem:
Why are the Daltons selectable, but the selected Daltons don't show up in the select-element?
Controller:
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};
View:
<div ng-controller="MyCtrl">
<label for="1">Please select items:</label>
<select id="1"
ui-select2
multiple
ng-model='selectedDaltons'
ng-options="dalton.id as dalton.name for dalton in daltons">
</select>
<label for="2">Selected Items:</label>
<ul id="2">
<li ng-repeat="dalton in selectedDaltons">{{dalton}}</li>
</ul>
</div>
Here it is as a jsfiddle
I think the issue is that ng-options is not supported in ui-select2. I reworked your fiddle using the option tag with an ng-repeat:
http://jsfiddle.net/u48j0yyc/1/
<div ng-controller="MyCtrl">
<label>Please select items:</label>
<select ui-select2 multiple ng-model='selectedDaltons'>
<option ng-repeat="d in daltons" ng-bind="d.name" value="{{ d.id }}"></option>
</select>
<label>Selected Items:</label>
<ul>
<div ng-bind="selectedDaltons"></div>
</ul>
</div>
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};
How can i filter the second combobox choices based on what i select on first combobox?
So here is the controller... and the view file.
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd"></select>
<label><input type="checkbox" </label>
</div>
</div>
</section>
</section>
</body>
and a simple JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
And when i click the checkbox.. i need first combobox to be disabled(so i can't select other Parinte)
You can filter results with pipe to filter
and use ng-disabled for select (i had a plnkr for you but it there is something wrong with plnkr functionality at this moment
so here is a HTML, i've change models for selects as well as extended their functionality
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"
ng-disabled="tierdisable"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd | filter:{idP:pSelected}:true "></select>
<label><input type="checkbox" ng-model="tierdisable">Disable</label>
</div>
</div>
</section>
</section>
</body>
and a simple JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
disabled :
<div>
Parinti:
<select ng-model="vm.parinti" ng-options="parinte.nume for parinte in vm.parinti" ng-disabled="checked"></select>
Copii:
<select ng-model="vm.copii" ng-options="copil.nume for copil in vm.copii "></select>
Blocat:
<input type="checkbox" ng-model="checked">
</div>
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'
}]
}];
});