Below is drop down selection code :
<select ng-model="filter.area">
<option value="">Select your location</option>
<option ng-repeat="area in areaNames" value='{{ area.area_name }}'>{{ area.area_name }}</option>
</select>
ng-model is set in controller before Async function is called:
$scope.filter.area = $cookies['filterArea'];
// which evaluated to some value lets say 'Bole'
Now comes asynchronous function:
query.find({
success: function(results_area) {
$scope.$apply(function() {
$scope.areaNames = results_area;
for (var i = 0; i < $scope.areaNames.length; i++) {
$scope.areaNames[i].area_name = $scope.areaNames[i].get('name');
};
});
},
error: function(error) {
console.log("error in fetching area info....");
}
});
ng-model isn't updating. Any idea whats wrong here?
To see the demo go here :
http://peppy-avatar-762.appspot.com/
Then select "Addis Ababa" and Select "Bole" as area then click on find food! Check area filter on left side. ng-model doesn't get updated!
If the options are loaded lazily, use ng-options instead of using ng-repeat on option
<select data-ng-model="selectedItem"
data-ng-options="item for item in items track by item">
</select>
Working Plnkr
Related
I have a drop down which has some set of values. Once I select the value from the dropdown list and I can see that filter is happening. If I want to filter the another value from the dropdwon then I have to do refresh without refresh the filtering is not happening. Overall If I select the value from the dropdown the filter is happening if I want to see the filter for next value I have to do refresh without refresh the filter is not happening.
Here is my HTMl code
<div class="col-md-4">
<select class="form-control" id="statusFilter">
<option value="">statuses</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div><script>
$("#statusFilter").on('change',function(){
var dropdownvalue = document.getElementById("statusFilter")
var selectStatus = dropdownvalue.options[dropdownvalue.selectedIndex].value
$.ajax({
type: 'POST',
url: '/status/filter',
data:{
'selectedstatus':selectStatus
},
success:function(result){
console.log(result)
if (result=='error'){
alert("There are no status value")
document.location.href="/status";
}
else{
document.write(result);
}}
})
})
</script>
I am not showing the entire backend
if len(status_list) > 0:
return render_template("status_list.html",result=status_list)
else:
result = 'error'
return result
is there any way we can filter the selected values without refresh in dropdown?
My backend is returning the list if it has some values or it returns error
When I reload the page, the first option is always empty. I want the option containing text Any Make to be the default select option. Here is the code for my view:
<select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-change="makeChanged()">
<option value="0" selected="selected"> Any Make</option>
<option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
</select>
here is my controller code:
.controller("homeController", function ($scope, makeData, $http) {
$scope.makeData = makeData;
$scope.makeChanged = function () {
$http({
method: "GET",
url: "homeService.asmx/GetModelById"})
.then(function (response) {
$scope.modelData = response.data;
})
}
})
just remove ng-init and in your model give default value
$scope.makeSelected = 0;
Here is a running fiddle for your code Click here
Fiddle for code with dynamic data Click here
If you aren't going to use ngOptions, at least get rid of that ng-init since it isn't a function, and in the controller function set $scope.makeSelected = 0;
Then you can remove the selected="selected" on that initial option, since the angularJS code will be handling what is selected.
See a demonstration below:
angular.module('app', [])
.value('makeData', [{
"make_id": 1,
"make_name": "cat"
},{
"make_id": 2,
"make_name": "dog"
},{
"make_id": 6,
"make_name": "monkey"
}])
.controller("homeController", function($scope, makeData, $http) {
//initialize the value associated with ng-model on the select list
$scope.makeSelected = 0;
$scope.makeData = makeData;
$scope.makeChanged = function() {
console.log('makeChanged');
//$http() request removed because we don't have access outside this domain for AJAX requests.
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="homeController">
<select class="form-control" id="make" name="make" ng-model="makeSelected" ng-change="makeChanged()">
<option value="0"> Any Make</option>
<option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
</select>
<div>makeSelected: {{makeSelected}}</div>
</div>
I´m working in Angular and I have fields to fill like
I fill my select list as:
function cargarCatalogo() {
apiService.get("../../api/Catalogos/",
null,
function(res) {
//console.log(res.data);.
$scope.Catalogos = res.data;
$scope.selected = $scope.Catalogos[0];
},
errorCatalogo);
}
I want to know how can I pass selected Value into url in my funcion:
function actualizar(vehiculo) {
$scope.vehiculo.Origen = $scope.usuario.Origen;
$scope.vehiculo.Version = $scope.Version;
apiService.post("../../api/AddCatalogoRegistro/" + selected.ID,
function(res) {
// my code
How can I pass that selected value as a selected.ID, chrome console throw me
ReferenceError: selected is not defined
View:
<select class="form-control" ng-change="filtro(selected)" ng-init="Catalogos[0]" ng-model="selected" ng-options="item.Nombre for item in Catalogos">
<option></option>
</select>
Use $scope.selected as ng-model value
<select class="form-control" ng-change="filtro(selected)"
ng-init="Catalogos[0]" ng-model="selected"
ng-options="item.Nombre for item in Catalogos">
It should solve your problem. And the best practise is to name the controller and use ng-model = "ctrlName.selected"
I have HTML Code like:
<select ng-model="category" ng-change="categoryChanged(category)" class="form-control"
data-ng-options="category as category.name for category in categories">
<option value="">All Categories</option>
</select>
<div ng-include="subCategoryTemplate"></div>
My Controller Code is:
$scope.categoryChanged= function (category) {
if (category) {
templateService.getSubCategoryTemplate({ categoryId: category.id }).$promise.then(
function (model) {
if (model) {
$scope.subCategoryTemplate = model.subCategoryTemplate;//Here I am getting on Template Path from the server
$scope.carCompanies = model.carCompanies;
}
},
function (error) {
});
}
$scope.filer = function () {
alert($scope.selectedCarCompany.id);
}
};
Template HTML is:
<select ng-model="$parent.selectedCarCompany" class="form-control"
data-ng-options="carCompany as carCompany.name for carCompany in carCompanies">
<option value="">All Car Companies</option>
</select>
My Scenarios is:
For the first time, When categoryChanged is called, ng-include loads the template and user selects a carCompany $scope's property selectedCarCompany is set. But even if the user change the category from the dropdown and categoryChanged event changes the template to some other view, still $scope'sselectedCarCompany have the value from the previously selected template. Is there a way to clear the $scope on change of ng-include template?
I have an html list with a form for defining filter values. In this form there is a select box:
<div style="...">
<label for="lstCategory">Category:</label><br/>
<select name="category" id="lstCategory" ng-model="category" ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
</select>
</div>
In my controller I bind the "categories" model to a REST resource:
.controller('AppointmentsHomeCtrl', [
...
function(
...
) {
$scope.location = typeof $location.search().location != 'undefined' ?
$location.search().location :
'0';
$scope.category = typeof $location.search().category != 'undefined' ?
$location.search().category :
'0';
$scope.categories = CategoriesResource.query();
Now I want to preselect a value in this select box, depending on the dearch parameter "location" in my url, which is done by the $scope.category = typeof $locati....... part of the code.
My problem is, that this preselection isn't reflected to my HTML while the mnodel itself has the correct value.
I already tryed to set the value after the query to the resource is done by watching the resource or giving a callback function to the "query" method but this also isn't working.
Did I missed something here? What is the correct way to solve this problem?
Edit:
It seems to recognise the options since:
$scope.category = "foo"; adds a pseudo option which gets selected.
But when I choose an existiong id, nothing happens at all:
$scope.category = "3";
at controller you can try this method for preselect value
$scope.precategory = '0'; //just for example value
then on your html code make sure ng-model having different variable with ng-repeat like this one
<select name="category" id="lstCategory" ng-model="precategory " ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
that method will help solve your problem, because i was getting same problem before :)
Instead of $scope.categories = CategoriesResource.query(); try:
CategoriesResource.query().then(function(result) {
$scope.categories = result;
});
You may have to tweak it a bit if the result is not an array...