A question that has been asked (and answered) a thousand times, yet I can't figure this out.
I'm trying to update the option labels of a select box based on the value of another.
Select code for the source of the new label:
<select id="year" name="year" ng-model="Data.year" ng-change="updateAge(Data.year)">
Option value code for the target of the new label
<option value="low">{{ Age.low }}</option>
Controller code to update the scope variable. The second console log displays the updated age, but that isn't shown in the view. I've tried $scope.$apply() but Angular errors because $apply is already in progress.
$scope.updateAge = function( year ) {
if ( year == '2016' ) {
console.log($scope.Age.low);
$scope.Age.low = 'NEW AGE';
console.log($scope.Age.low);
}
}
Some observations :
As you set the option value as "low". Hence, on updateAge function call this block if ( year == '2016' ) { ... } will not execute because year value will always be low.
Make option value also dynamic.
try <option value="{{ Age.low }}">{{ Age.low }}</option>
instead of <option value="low">{{ Age.low }}</option>
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.Age = {"low": '2016'};
$scope.updateAge = function(year) {
if (year == '2016') {
console.log($scope.Age.low);
$scope.Age.low = 'NEW AGE';
console.log($scope.Age.low);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select id="year" name="year" ng-model="Data.year" ng-change="updateAge(Data.year)">
<option value="{{ Age.low }}">{{ Age.low }}</option>
</select>
</div>
Related
For using less resources I want to fetch data from the server (using livewire) only for the first time and the other times to use the already fetched data in alpinejs.
So if there is a change in my <select>, the fillStates will be triggered:
<select wire:model="selectedCountry" name="selectedCountry" id="selectedCountry" wire:change="fillStates">
<option value="">Select Country</option>
#foreach($this->countries as $country)
<option value="{{ $country->id }}">{{ $country->name }}</option>
#endforeach
</select>
The fillStates method will return the data:
public function fillStates()
{
$states = State::where('country_id', $this->selectedCountry)->get();
if(count($states)) {
$this->states[$this->selectedCountry] = $states;
return $this->states[$this->selectedCountry];
}
return [];
}
And my question is here. How can I prevent it requesting more than one time when the $this->states[$country] has already value and can be accessed with alpinejs?
For example I select United States in my <select>. For the first time it needs to fetch the data which is its states. I change it to Canada. This time it needs to fetch the data which is its states. But if I select the United States again, it shouldn't request as it has already fetched and is available in alpinejs. How can I achieve it?
I think you have to manually validate using alpinejs.
<div x-data="{
selectedCountry: null,
countries: {},
}"
x-init="$watch('selectedCountry', () => {
if(! (selectedCountry in countries)) {
#this.call('fillStates');
countries[selectedCountry] = #this.get('states');
}
})"
>
<select x-model="selectedCountry" name="selectedCountry" id="selectedCountry" >
<option value="">Select Country</option>
#foreach($this->countries as $country)
<option value="{{ $country->id }}">{{ $country->name }}</option>
#endforeach
</select>
</div>
I have a select tag in my html code like this:
<select ng-model="brandList" name="brandList" style="width:110px;" >
<option value="" selected>---Please select---</option>
<option ng-repeat="item in brandnameList | unique:'brandname'" value="{{item.brandname}}" style="width:50px;"> {{item.brandname}}</option>
</select>
The values in my select was fetched from the database via API and the code goes like this.
adminService.getbrandnameList()
.then(function(data){
$scope.brandnameList = data.data;
$scope.brandn=data.data[0].brandname;
});
I have another function that needs the selected value on the select tag
$scope.ExportmodalAdmin = function () {
alert( $scope.brandList )
}
But the model for the select which is $scope.brandList returns an undefined value. How can I fix this? I need the value from the select tag to be passed on the function.
Hope you have defined the variable brandList in your controller.
$scope.brandList = {};
Also, Change your ng-repeat statement as below:
<select ng-model="brandList" name="brandList" ng-options="item.brandname for item in brandnameList" style="width:110px;" ng-change="alertChange()" >
<option value="" selected>---Please select---</option>
</select>
Controller code to check change:
$scope.alertChange = function(){
alert($scope.brandList.brandname);
};
look at plunker reference here plunk
In Angular.JS, is there a way to bind two different ng-models when a select drop down option is selected?
Angular code:
<select ng-model="vm.data.styleId" ng-options="item.id as item.name for item in vm.getStylesData.styles">
<option value="">Select a Style</option>
</select>
Results in:
<option value="{{item.id}}">{{item.name}}</option>
With the Angular code I have so far, when an option is selected, it will save the option's value to the ng-model. In this case item.id is bound to vm.data.styleId.
However in addition to this, I also need to bind the 'item.name' of the selected option. Basically, when an option is selected, I need to bind both the item.id to vm.data.styleId, and the item.name to vm.data.name.
Is there an easy way to do this using Angular.JS?
Solution (using the answer from lisa p.):
In the View:
<select ng-model="vm.styleItem" ng-change="vm.getDetails()" ng-options="item as item.name for item in vm.getStylesData.styles">
<option value="">Select a Style</option>
</select>
Inside the controller:
vm.getDetails = function () {
// set the values of the select drop down
vm.data.styleId = vm.styleItem.id;
vm.data.style = vm.styleItem.name;
}
You can bind to an object containing both values like
item = { styleId: 23, name: "the name" }
vm.data = {{ styleId: ..., name: ... }}
then you bind to vm.data with
<option value="{{item}}">{{item.name}}</option>
Controller
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.vm.data.styleId = "";
$scope.item = {id : '1', name : 'name'};
});
html
<div ng-controller="myCtrl">
<select ng-model="vm.data.styleId" ng-options="item.id as item.name for item in vm.getStylesData.styles">
<option value="{{item}}">{{item.name}}</option>
</select>
</div>
Make an object which holds both id and name and pass that object as value to option
I have problem with empty option when i repeat through array.
Here is code.
View:
<select ng-model="getseason" class="form-control">
<option ng-repeat="season in seasons" value="{{ season }}">
Season {{ season + '/' + seasonaddone(season) }}
</option>
</select>
Model:
$scope.getseason={};
$scope.seasons = [2014,2013,2012,2011,2010,2009,2008,2007,2006,2005];
$scope.getseason = $scope.seasons[0];
$scope.seasonaddone = function(season){
return ++season;
}
$scope.$watch('getseason',function(){
console.log($scope.getseason);
console.log(typeof $scope.getseason);
});
How can i remove empty option?
I find many similiar problems, but i cant find solution for this.
Try to use ngOptions instead of ngRepeat
Try like this
<select ng-model="getseason" class="form-control" ng-options="season as 'Season '+ season + '/' + seasonaddone(season) for season in seasons">
</select>
This is a common problem however when trying to use the solutions provided here on Stackoverflow I am having no success... I have the following in my HTML view:
<select class="date-input" ng-model="reservation.date">
<option ng-repeat="d in dates track by $index"
value="{{ d }}"
> {{ d }} </option>
</select>
In my controller I have the following...
$scope.makeDates = (function () {
dArray =[];
// we make a big array of dates ['dd-mm-yyyy','dd-mm-yyyy', 'dd-mm-yyyy'...] for 3 months and return it
return dArray;
}();
$scope.reservation = {
date : null,
time : null,
quantity : null
};
$scope.dates = $scope.makeDates;
$scope.reservation.date = $scope.dates[0];
However despite me setting $scope.reservation.date = $scope.dates[0]; the select still produces a blank option and is the default/selected value!?!?! Am I missing something? I know it is early but I can't see what I am doing wrong?
You don't need attribute value="{{ d }}" for <option>. This is a reason why you get empty item.
HTML
<div ng-app='myApp' ng-controller="ArrayController">
<select class="date-input" ng-model="reservation.date">
<option ng-repeat="d in dates track by $index">{{d}}</option>
</select>
</div>
Demo Fiddle