I'm a very begginer in AngularJS(1.6) and I need to filter some results from a selected option.
I have to filter cities from states, and until there i'm doing fine. But then I need to filter and show the stores in this city on a list. Does anyone knows how to do It?
My code:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body data-ng-controller="testController">
<select id="state" ng-model="stateSrc" ng-options="state for (state, city) in states" ng-change="GetSelectedState()">
<option value=''>State</option>
</select>
<select id="city" ng-model="citySrc" ng-options="city for (city,store) in stateSrc" ng-change="GetSelectedCity()" ng-disabled="!stateSrc">
<option value=''>City</option>
</select>
<select id="city" ng-model="store" ng-options="store for store in citySrc" ng-disabled="!stateSrc || !citySrc">
<option value=''>Store</option>
</select>
<script>
angular
.module('myApp', [])
.run(function($rootScope) {
$rootScope.title = 'myTest Page';
})
.controller('testController', ['$scope', function($scope) {
$scope.states = {
'STATE_1': {
'City_1': ['Store_1', 'Store_2'],
'City_2': ['Store_3', 'Store_4']
},
'STATE-2': {
'City_3': ['Store_1', 'Store_2'],
'City_4': ['Store_3', 'Store_4']
}
};
$scope.GetSelectedState = function() {
$scope.strState = $scope.stateSrc;
};
$scope.GetSelectedCity = function() {
$scope.strCity = $scope.citySrc;
};
}
])
</script>
</body>
</html>
Thank's a lot!
It would be really helpful if you posted what your data source looks like. Assuming citySrc has objects containing arrays of stores, I would set a selectedCity in your controller when you call GetSelectedCity(), and then:
<ul>
<li ng-repeat="store in selectedCity.store">{{store}}</li>
</ul>
This will create list items for each store in your selectedCity object.
Related
I am trying to get the user selected value from select list using ng-change, but i can't seem to find what went wrong:
Everytime i select any other option i get "Sam" , my question is how can i get the userselected value instead of the default one "Sam"
Here is the html:
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p> Employee Name/Employee ID:
<select ng-model="pickEmp" ng-change="setEmployee(pickEmp)">
<option ng-value="James">James</option>
<option ng-value="Sam">Sam</option>
<option ng-value="Patrick">Patrick</option>
</select>
</p>
</div>
</body>
and here is the JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.formObject = {
empId:'Sam',
que1:{
status:'YES',
payBand:0-11
}
$scope.setEmployee = function(){
$scope.pickEmp = $scope.formObject.empId;
}
Inside the setEmployee function, you are setting the ng-model as value sam. remove that line.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.formObject = {
empId:'Sam',
que1:{
status:'YES',
payBand:0-11
}}
$scope.setEmployee = function(){
console.log($scope.pickEmp)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p> Employee Name/Employee ID:
<select ng-model="pickEmp" ng-change="setEmployee(pickEmp)">
<option ng-value="James">James</option>
<option ng-value="Sam">Sam</option>
<option ng-value="Patrick">Patrick</option>
</select>
</p>
</div>
</body>
I would like to set a default value to my select component using angular ng-options
I have seen other topics about this question but i try to use it in my case but not solve..
So i have a select component
<select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control">
<option></option>
</select>
and i would like to set a defaul value.
You can to set at no-model property. Example:
$scope.distrito.entidade.idEntidade = $scope.distritos[0].entidade.idEntidade;
angular.module('app', []).controller('select', function($scope) {
$scope.distrito = {};
$scope.distrito.entidade = {};
$scope.distritos = [{
entidade: {
nome: 'test1',
idEntidade: 1
}
}, {
entidade: {
nome: 'test2',
idEntidade: 2
}
}];
$scope.distrito.entidade.idEntidade = $scope.distritos[0].entidade.idEntidade;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="select">
<select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control">
</select>
</div>
In your controller you can set $scope.distrito.entidade.idEntidade = "defaultValue". Your ng-model is the selected value, so if you don't initialize it in your controller, the value will be undefined. If you set a value to the relevant model during initialization, this will be the default selected value.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.somethingList = [];
$scope.somethingList.push("Something1");
$scope.somethingList.push("Something2");
$scope.somethingList.push("Something3");
$scope.selectedSomething = $scope.somethingList[0];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-options="something for something in somethingList" ng-model="selectedSomething"></select>
</div>
</body>
</html>
<select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control">
<option>THIS IS YOUR DEFAULT VALUE</option>
If you want to have a default value with some meaning you should do it in your controller, eg:
if (!$scope.distrito.entidade.idEntidade)
$scope.distrito.entidade.idEntidade = 'Some default value';
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.state = [{name:'TamilNadu', code:1}, {name:'Kerala', code:2}, {name:'Karnataka', code:3}];
$scope.onChange = function() {
var a = this.drop.state; }
});
</script>
<body>
<div ng-app="myApp" ng-controller="myctrl">
State :
<select id="stat" ng-model="drop.state" ng-change="onChange()">
<option ng-repeat = "x in state"> {{x.name}} </option>
<select>
</div>
</body>
In this code, I can be able to get the selected value from the textbox in the variable a. Now, I need to get the code value of the name selected. Is it possible using indexof(). And I need it in dynamic ie., when the 'state' is selected I need that corresponding 'code' from the array set.
<option value="{{x}}" ng-repeat = "x in state"> {{x.name}} </option>
If you add the value on your Option, you may get the complete object, and accessing the code and the Value
you can assign code as value to option
<option ng-repeat = "x in state" ng-value="x.code"> {{x.name}}
Demo
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.drop = {}
$scope.state = [{name:'TamilNadu', code:1}, {name:'Kerala', code:2}, {name:'Karnataka', code:3}];
$scope.onChange = function() {
var a = $scope.drop.state
console.log(a)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myctrl">
State :
<select id="stat" ng-model="drop.state" ng-change="onChange()">
<option ng-repeat = "x in state" ng-value="x.code"> {{x.name}} </option>
</select>
</div>
Even though the other answer is valid, this is the right way to go about it:
<select id="stat" ng-model="drop.state" ng-options="x.code as x.name for x in state" ng-change="onChange()">
<option value="">Select a value</option>
</select>
If the purpose of the ng-change was to get the state code, this way it's not needed. Your ng-model will be equal to the selected state code.
You can bind data to a single property., and can access both. with preferred ng-options .
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.state = [{
name: 'TamilNadu',
code: 1
}, {
name: 'Kerala',
code: 2
}, {
name: 'Karnataka',
code: 3
}];
$scope.onChange = function() {
alert(this.drop.state.name);
alert(this.drop.state.code);
}
});
</script>
<body>
<div ng-app="myApp" ng-controller="myctrl">
State :
<select id="stat" ng-model="drop.state" ng-options= "x as x.name for x in state" ng-change="onChange()"> </select>
</div>
</body>
I have an array like $scope.years = ['1900', '1901', '1902'];
If I use <select ng-model="chosenYear" ng-options="choice for choice in years"></select>
I get
<option value="0">1900</option>
<option value="1">1901</option>
<option value="2">1902</option>
where index of the array becomes the 'value' of options. How can I have both value and label equal (both being 1900, 1902, 1902, etc) ?
A similar question has an accepted answer, but it doesn't do this thing at all.
Angular version : 1.2.16
What you want is <select ng-model="chosenYear" ng-options="choice as choice for choice in years"></select>
EDIT:
since above does not work in angular 1.2.16 try below
<select ng-model="chosenYear" ng-options="choice for choice in years track by choice"></select>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.years = ['1900', '1901', '1902'];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="chosenYear" ng-options="choice for choice in years track by choice"></select>
</div>
</body>
</html>
look at this, is similar with your case or you can just use ng-repeat and create value dynamically<option ng-repeat="option in selecteOptions" value="option">{{option}}</option>
Try this
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.years = [{
label: "1900",
value: "1900"
}, {
label: "1901",
value: "1901"
}, {
label: "1902",
value: "1902"
},
];
});
<!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">
<p>Select a year:</p>
<select name="mySelect" id="mySelect" ng-options="option.label for option in years track by option.value" ng-model="selectedCar"></select>
<h1>You selected: {{selectedCar.label}}</h1>
</div>
</body>
</html>
If you don't mind using ng-repeat, use this instead:
<select ng-model="selectedItem">
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
I have a select element and would like to allow the user to click an add button add additional select elements so that the user can continue to select additional items.
When I use the code below, the dropdown does not display and no additional select elements are added when I click the "Add" button.
Any suggestions on how to do this correctly?
Clarification: I want to add new dropdowns that always include the same items. So I want to add new select elements, not new items within a select element.
HTML:
<select ng-repeat="class in project.classes" class="form-control" id="class" name="class"
ng-model="editProject.project.class" ng-options="classid.class group by classid.code for classid in editProject.classids track by classid.class">
<option value="">--Select Class--</option>
</select>
<button ng-click="editProject.project.class.push({})">Add</button>
Controller:
var editProject = this;
editProject.project.class = [];
editProject.classids = [
{code: '1', class: 'Chemicals'},
{code: '2', class: 'Paints'},
// . . .
];
I create this for you, I hope this helps you.
<!DOCTYPE html>
<html ng-app="dynamicallySelect" ng-controller="ExampleController">
<head>
<title>My ParseApp site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>
<body>
<div ng-repeat="select in selects">
<select name="{{select.name}}" ng-model="select.model" multiple>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
multipleSelect[{{$index}}] = {{select.model}}
</div>
<button ng-click="addMultipleSelect()">add select</button>
<script>
angular.module('dynamicallySelect', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.selects = [];
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1'
};
$scope.addMultipleSelect = function() {
var newSelect = {
name: "multipleSelect",
model: "multipleSelectModel"
}
$scope.selects.push(newSelect);
}
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
}
]);
</script>
</body>
</html>
Inside the <div> where you are using for multi select you can use ui-select2="multi" ng-model="editProject.project.class", then you can write the select model value what you want in your drop down inside that <div>.This will mostly workout.
Your directive is set up incorrectly.
<select ng-model="editProject.project.class">
<option ng-repeat="class in project.classes" value="{{class.code}}">{{option.class}}</option>
</select>
<button ng-click="project.classes.push({class: 'New Class'})">Add Select</button>