I have two select boxes (counties and cities). When I change country I want to update the cities corresponding to countries.
Template:
<select id="countries">
<% _(countries).each(function(country) { %>
<option value="<%= country.id %>">`enter code here`<%= country.name %></option>
<% }); %>
</select>
<input id="countryId" name="countryId" type="hidden" value="<%= countryId %>" />
<select id="cities">
<% _(cities[countryId]).each(function(city) { %>
<option value="<%= city.id %>"><%= city.name %></option>
<% }); %>
</select>
View
events: {
'change #countries': 'setCountry',
},
setCountry: function(element) {
this.model.set('countryId', element.target.value);
this.$el.find( "#countryId" ).val( this.model.get( "countryId" ) );
//this.render();
},
If I call the render() in the setCountry, it updates the cities, but it refreshes the other form elements like the validation messages.
How can I update the code, when I change the country it refresh only the cities selectbox?
Related
I want to order date. But doesn't work correctly. Date format is dd-mm-yyyy. Just order dd format doesn't check mm and yyyy. How can I solve?
JS
$scope.sortOptions = [
{
name:'Date desc',
sortCategory:'-anndate'
},
{
name:'Date asc',
sortCategory:'anndate'
}
];
HTML
<select ng-model="selectedSortType" class="custom-select">
<option value="" selected="">Select type</option>
<option value='{{opt.sortCategory}}' ng-repeat="opt in sortOptions track by $index">{{opt.name}}</option>
</select>
<div ng-repeat="i in res| orderBy:selectedSortType">
<div>{{i.anndate}}</div>
</div>
var app = angular.module('app', [])
.controller('appController', appController);
appController.$inject = ['$scope', '$window'];
function appController($scope, $window) {
$scope.title = "date sorting example";
$scope.sortOptions = [{
name: 'Date desc',
sortCategory: '2018-07-15 '
},
{
name: 'Date desc',
sortCategory: '2018-07-12 '
},
{
name: 'Date asc',
sortCategory: '2018-07-13'
}
];
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appController">
<p>Ascending Order</p>
<div ng-repeat="i in sortOptions | orderBy:'sortCategory'">
<p>{{i.sortCategory}}</p>
</div>
<select ng-model="selectedSortType" class="custom-select">
<option value="" selected="">Select type</option>
<option value='{{opt.sortCategory}}' ng-repeat="opt in sortOptions | orderBy:'sortCategory'">{{opt.sortCategory}}</option>
</select>
<p>Descending Order</p>
<div ng-repeat="i in sortOptions | orderBy:'-sortCategory'">
<p>{{i.sortCategory}}</p>
</div>
<select ng-model="selectedSortType" class="custom-select">
<option value="" selected="">Select type</option>
<option value='{{opt.sortCategory}}' ng-repeat="opt in sortOptions | orderBy:'-sortCategory'">{{opt.sortCategory}}</option>
</select>
</div>
Try this..
Since the date in res object is in string format the filter is applying on dd value.
For entire date filter you need to convert the anndate to Date() object
Place the following code in the line below assigning res value in controller
angular.forEach($scope.res,function(item){ item.anndate = new Date(item.anndate); });
Then in html replace with below line
<select ng-model="selectedSortType" class="custom-select">
<option value="" selected="">Select type</option>
<option value='{{opt.sortCategory}}' ng-repeat="opt in sortOptions track by $index">{{opt.name}}</option>
</select>
<div ng-repeat="i in res| orderBy:selectedSortType">
<div>{{i.anndate| date : 'dd/MM/yyyy'}}</div>
</div>
I am using Angular, Node.js, Sequelize/Postgres, and have a form (select options form). I am trying to make the option fields depend on each other, so for example when a particular first name is picked, only the corresponding last name is being shown in the other select options field. I don't really know how to do that, only found some similar examples but still don't quite understand how to do that when the values are fetched directly from the database and any help would be appreciated.
Angular factory:
app.factory('DoctorsFactory', function($http){
var DoctorsFactory={};
DoctorsFactory.fetchAll=function(){
return $http.get('/api/doctors')
.then(function(docs){
return docs.data;
})
}
return DoctorsFactory;
});
controller:
app.controller('AppointmenController', function ($scope, DoctorsFactory) {
$scope.doctors={};
DoctorsFactory.fetchAll()
.then(function(all){
console.log('bla', all)
$scope.docs=all;
})
});
HTML:
<div class="container">
<h2>Form control: select</h2>
<form ng-submit="searchForDoc(doctors)">
<div class="form-group">
<label for="sel1">Firstname</label>
<select class="form-control" id="sel1" ng-model="doctors.firstname">
<option ng-repeat="doc in docs">{{doc.firstname}}</option>
</select>
<br>
<label for="sel1">Lastname</label>
<select class="form-control" id="sel1" ng-model="doctors.lastname">
<option ng-repeat="doc in docs">{{doc.lastname}}</option>
</select>
<br>
<label for="sel1">Speciality</label>
<select class="form-control" id="sel1" ng-model="doctors.speciality">
<option ng-repeat="doc in docs">{{doc.speciality}}</option>
</select>
<br>
<label for="sel1">Department</label>
<select class="form-control" id="sel1" ng-model="doctors.department">
<option ng-repeat="doc in docs">{{doc.department}}</option>
</select>
<br>
<label for="sel1">School</label>
<select class="form-control" id="sel1" ng-model="doctors.school">
<option ng-repeat="doc in docs">{{doc.school}}</option>
</select>
<br>
</div>
<input type="submit">
</form>
</div>
route:
router.get('/', function(req,res,next){
Doctors.findAll({})
.then(function(alldoctors){
console.log(alldoctors)
res.send(alldoctors);
})
.catch(next);
})
database model:
var Sequelize = require('sequelize');
var db = require('../_db');
module.exports = db.define('doctors', {
firstname: {
type: Sequelize.STRING
},
lastname: {
type: Sequelize.STRING
},
speciality: {
type: Sequelize.STRING
},
department: {
type: Sequelize.STRING
},
gender: {
type: Sequelize.STRING
},
school: {
type: Sequelize.STRING
},
languages:{
type: Sequelize.STRING
}
});
Myself have a angularjs sample with filters here where i can filter the values with exact match using the true comparator as,
<table>
<tr ng-repeat="user in users | filter:{name: name, phone: phone} : true">
<td>{{user.name}}</td>
<td>{{user.phone}}</td>
<td>{{user.secret}}</td>
</tr>
</table>
It works great with combination filters when using angularjs version 1.1.5 where as it returns null for other angularjs versions when user filters and return back to --select-- position.
Reference: with angularjs 1.1.5
, with angularjs 1.4.x
You can see updated demo. It is working fine as your requirement. I have updated AngularJS 1.4.8 in javascript.
HTML Code
<div ng-app="plunker">
Name: <select ng-model="name">
<option value="">select</option>
<option value="John1">John1</option>
<option value="Mike">Mike</option>
</select>
Phone: <select ng-model="phone">
<option value="">select</option>
<option value="555-1276">555-1276</option>
</select>
<table>
<tr ng-repeat="user in users | filter:{name: name, phone: phone} : true">
<td>{{user.name}}</td>
<td>{{user.phone}}</td>
<td>{{user.secret}}</td>
</tr>
</table>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.users = [{name:'John1', phone:'555-1276', secret:'shhh'},
{name:'John1', phone:'800-BIG-MARY', secret:'psst'},
{name:'Mike', phone:'555-4321', secret:'shhh'},
{name:'Adam', phone:'555-5678', secret:'shhh'},
{name:'Julie', phone:'555-8765', secret:'shhh'}];
});
Match with user.name not name as you are using ng-repeat = "user in users" .
How to achieve filtered data on the selectbox based on the previous selectbox
This is my JSON data
$scope.data=
[
{
"parentName": "George",
"childName": "George Child1"
},
{
"parentName": "Folly",
"childName": "FollyChild1"
},
{
"parentName": "Sally",
"childName": "Sally Child1"
},
{
"parentName": "George",
"subCatName": "GeorgChild2"
},
{
"parentName": "Folly",
"subCatName": "FollyChild2"
},
{
"parentName": "Folly",
"subCatName": "FollyChild3"
},
{
"parentName": "Sally",
"subCatName": "Infant Food"
}
]
This is my JSON data.
I have two selectboxes
First Select Box for displaying parentName
Second Select Box for displaying childName
Initially first select box showing in ---select---- at that time second select box is disabled
When I select on the parentName of first select box I need to display the childNames of that parent only in second select box
This is my view page struture I need to aligned it in horzontal way
<div class="col-md-3">
<form>
<div class="form-group">
<label for="exampleSelect1"><b>Parent</b></label>
<select class="form-control" id="data">
<option ng-repeat="(key,value) in data | orderBy:'parentName'| groupBy:'parent'">{{key}}</option>
</select>
</div>
</form>
</div>
<div class="col-md-3">
<form>
<div class="form-group">
<label for="exampleSelect1"><b>Child Names</b></label>
<select class="form-control" id="childnames">
<option>--Select--</option>
</select>
</div>
</form>
</div>
Any remodification needed. Please help me
I am new in AngularJS any filter for any other method for getting this way.Thankyou
You can check the plnkr here.
In second select
<select class="form-control" id="childnames" ng-model="vm.child"
ng-options="data.childName for data in vm.data| filter: {parentName:vm.selectedParent}">
<option>--Select--</option>
</select>
</div>
<select class="form-control" id="childnames" ng-options="n.subCatName as n.subCatName for n in data | filter:{parentName:parentSelect}" >
<option>--Select--</option>
</select>
Add ng-model="ng-model="parentSelect" in parent and then replace child select box with this code
The following changes worked for me:-
Add a model to parent select element.<select class="form-control" id="data" ng-model="parent">
Use this model to filter childNames
<select class="form-control" id="childnames"><option ng-repeat="value in data | filter: parent">{{value.childName}}</option></select>
I supposed to have the following code:
.JS
angularcomponents.controller('CountryCntrl', ['$scope', function($scope) {
$scope.countries = {
'India': {
'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
},
'USA': {
'Alabama': ['Montgomery', 'Birmingham'],
'California': ['Sacramento', 'Fremont'],
'Illinois': ['Springfield', 'Chicago']
},
'Australia': {
'New South Wales': ['Sydney'],
'Victoria': ['Melbourne']
}
};
}]);
and the html:
<div ng-controller="CountryCntrl">
<div class="col-sm-4">
<select id="country" ng-model="states" ng-options="country for (country, states) in countries">
<option value=''>
Select
</option>
</select>
<br>
<small><em>Country</em></small>
</div>
<div class="col-sm-4">
<select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
<option value=''>
Select
</option>
</select>
<br>
<small><em>States</em></small>
</div>
<div class="col-sm-4">
<select id="city" ng-disabled="!cities || !states" ng-model="city">
<option value=''>
Select
</option>
<option ng-repeat="city in cities" value='[[city]]'>
[[city]]
</option>
</select>
<br>
<small><em>City</em></small>
</div>
</div>
I don't understand how it is binding the right values for cities, countries and states. In my $scope there is not any label to identify it.
Does it depend on the format of the array?
You don't need to define variables in your javascript (though you may prefer to) - when you declare a ng-model, a variable is created on $scope for you. So your country select is bound to a model states, which has no value initially.
Because you did country for (country, states), the label of that select is the array key, which is the country name. The value is bound to the array value. So when you select a country, $scope.states is populated with the full array corresponding to that country.
So now $scope.states has an array in it, which allows ng-options="state for (state,city) in states" to build a selector, and so on.
You can see it happening by displaying the contents of your model variables. Here is a fiddle to show that: https://jsfiddle.net/wbpm8bc7/
As you can see, initially it shows nothing as those variables are empty. But as you make a selection, they are populated with arrays.