I have a list made with ng-repeat with options. I'm trying to make it so that when I click an option, the value of the selection will be passed to an object.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" >
<option value="1" ng-repeat="t in klas" ng-model="vakselect">{{ t.Name }}</option>
</select>
$scope.user = {
vak: klas.vakselect,
};
I have small experience with Angular, so I'm not sure how to make it work correctly.
Edit:
I have adjusted my code and user.vak does seem to catch the selectvak field, but now passes it as an array. How do I make it so it's a string in $scope.user? So whenever I log user, I will see a string of vak and then an array of students.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" ng-model="user.vak" ng-options="t.Name as t.Name for t in klas" ng-click="getJSON1()">
$scope.user = {
vak: '',
// klas: klasselect,
student: [$scope.student] -1
};
TLJ and Arnaud are correct.
But answering your initial question, in the select tag, instead of ng-model="vakselect" just use ng-model="user.vak".
Then, when the value of the select changes, the value of user.vak will change automatically.
real code is this : (and nothing to do inside the controller.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" ng-model="user.vak">
<option value="1" ng-repeat="t in klas">{{ t.Name }}</option>
</select>
And you should use ng-options instead of ng-repeat to create your options
https://docs.angularjs.org/api/ng/directive/ngOptions
This will add t.name to an array when you click the option. Take a look at the controller function and the ng-click in the partial.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" >
<option value="1" ng-repeat="t in klas" ng-click="add(t.Name)" ng-model="vakselect">{{ t.Name }}</option>
</select>
var string_option;
$scope.add = function(t) {
string_option = t;
console.log(string_option )
}
Related
Could you please tell me why ng-change give "undefined" in angularjs ?
$scope.onChangedCityDropDown= function(i){
console.log(i)
}
<select class="form-control" ng-model="a"
ng-options="item.city as item.city for item in vals"
ng-change="onChangedCityDropDown(item)">
<option value="" disabled>choose an option</option>
</select>
here is my code
https://plnkr.co/edit/HLLUcVnIl8ySg8baSMHv?p=preview
You can directly pass the ng-model value to the function,
<select class="form-control" ng-model="a" ng-options="item.city as item.city for item in vals" ng-change="onChangedCityDropDown(a)">
<option value="" disabled>choose an option</option>
</select>
just change onChangedCityDropDown(item) to onChangedCityDropDown(a)
see
ng-options doesn't work the same way as that of ng-repeat works. You won't get item value apart from ng-options attribute value. To make it work you should use ng-model(a) value inside ng-change callback function.
ng-change="onChangedCityDropDown(a)"
Also you want to set state based on city selection then change ng-options to below
ng-options="item.state as item.city for item in vals"
Demo Plunker
Just change your ng-options as below this will give you the object you are expecting.
ng-options="item as item.city for item in vals"
ng-change="onChangedCityDropDown(a)"
in ng-change you have to pass your ng-model
here is the working example
You can try like the below code for the city and the state reference selection and also please check this plunker link of your given working example.
Controller:
$scope.vals = [{
"city":"gurgaon",
"state":"Haryana"
}, {
"city":"Manesar",
"state":"Haryana"
}, {
"city":"Bangalore",
"state":"Karnataka"
}];
$scope.onChangedCityDropDown= function(i){
console.log(i)
}
$scope.onChangedStateDropDown= function(i){
console.log(i)
}
Template:
City
<select class="form-control" ng-model="city" ng-options="item.city as item.city for item in vals" ng-change="onChangedCityDropDown(city)">
<option value="" disabled>Select City</option>
</select>
State
<select class="form-control" ng-model="state" ng-options="item.state as item.state for item in vals | filter:{city:city}" ng-change="onChangedStateDropDown(state)">
<option value="" disabled>Select State</option>
</select>
I'm setting the ng-change directive in a select element of my form but the function linked to it is not called when I change the value. I've been reading very similar questions and applying the answers I see and so far none has worked yet.
Can you see wjat I'm doing wrong?
My HTML:
<div class="row" ng-app="quoteApp">
<div class="col-lg-12" ng-controller="QuoteController" ng-init="initialize()">
<h1 class="page-header">Quote</h1>
<div class="form-group">
<label>Carrier</label>
<select class="form-control" ng-model="form_carrier_id" ng-change="loadProducts()">
<option ng-repeat="carrier in carriers" value="{{carrier.id}}">{[{carrier.name}]}</option>
</select>
</div>
<div class="form-group">
<label>Product</label>
<select class="form-control" ng-model="form_product_id">
<option value=""></option>
<option ng-repeat="product in products" value="{{product.id}}">{[{product.name}]}</option>
</select>
</div>
</div>
</div>
And my controller:
angular.module('quoteApp', ['angular-loading-bar']).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})
.controller('QuoteController', function ($scope, $http) {
$scope.carriers = [];
$scope.products = [];
$scope.form_carrier_id = '';
$scope.form_product_id = '';
$scope.getUrl = function(action){return '/admin/application/quote/json?action='+ action;}
$scope.initialize = function(){
// Get the list of carriers
$http.get($scope.getUrl('getCarriers'))
.success(function (data) {
$scope.carriers = data;
})
.error(function () {
alert('Error loading carriers');
});
}
$scope.loadProducts = function(){
alert('HERE');
}
});
For me everything looks right. Can you see what I'm missing? The first select loads normally, the problem is that when I change its value the function loadProducts is not fired.
Thanks
this may not be the problem itself, however you should always use ng-options rather than <option ng-repeat>
I've seen some weird behaviour in the past due to that
I have found what was the problem. It was how I was filling the select. It has to be filled like this:
<select class="form-control" ng-model="form_carrier_id"
ng-options='carrier.id as carrier.name for carrier in carriers'
ng-change="loadProducts()">
</select>
Try using ng-options for repeating the products in your select element.
You can use ng-options as follows:
<select class="form-control" ng-model="form_product_id"
ng-options="product.id as product.name for product in products" ng-change="loadProducts()">
<option value="">Select color</option>
</select>
not as the products are set values, the loadProduct should trigger, whenever a value is selected as the ng-model would be set
I am currently working on a CRM in angularJs and Firebase, but I need to get the variable from an ng-repeat such follows
<select class="form-control" id="sel1">
<option value="">--Choose an Account--</option>
<option class="dropdown" value="{{contact.account}}" ng-repeat="account in accounts">{{account.name}}</option>
</select><br />
Controller
$scope.addConct = function () {
var account = $scope.contact.account;
The accounts.name is working fine, it shows all the accounts. How can I get that account string and assign that String to my contact.account?
Thanks in advance.
Just add the ngModel directive to the select field to bind the value to a scope variable:
HTML
<select class="form-control" id="sel1" ng-model="someVariable">
<option value="">--Choose an Account--</option>
<option class="dropdown" value="{{contact.account}}" ng-repeat="account in accounts">{{account.name}}</option>
</select><br />
Controller
$scope.someVariable = '';
$scope.addConct = function () {
var account = $scope.contact.account;
};
Now you can access the value at any time with $scope.someVariable
More information on ngModel
My model is the array vh.loadedViews with 4 items.
My ng-repeat on the option: ng-repeat="view in vh.loadedViews"
my ng-model on the select: ng-model="view.description"
However in my ng-change function vh.chooseView it's printing out the binding text and not the actual model data.
Markup:
<section class="saved-views-modal" ng-show="vh.loadSavedModal">
<header><h1>Select a saved view</h1></header>
<select name="select"
ng-model="view.description"
ng-change="vh.chooseView(view.description)">
<option ng-repeat="view in vh.loadedViews"
value="view.description">{{view.description}}</option>
</select>
<button class="btn-green"
ng-click="vh.loadSavedView(view.description)">
Load View
</button>
</section>
Directive Controller:
var vm = this; // vh in markup
vm.chooseView = function(description) {
console.log('chooseView > view.description: ');
console.log(description);
}
You have not populated value tag of your options. You should populate it using interpolation like value="{{view.description}}" to render option value.
Also you ng-model should be ng-model="vh.description" instead of view.description
Markup
<select name="select"
ng-model="vh.description"
ng-change="vh.chooseView(view.description)">
<option ng-repeat="view in vh.loadedViews"
value="{{view.description}}">{{view.description}}</option>
</select>
I am using angular js to draw select boxes.
<select ng-model="selected">
<option value="{{obj.id}}" ng-repeat="obj in values">{{obj.name}} </option>
</select>
selected id - {{selected}}
Here the default selected is not initialized according to value selected.
Have made a fiddle for the problem.
You should use ngOptions directive to render selectbox options:
<select ng-model="selected" ng-options="obj.id as obj.name for obj in values"></select>
Fixed demo: http://jsfiddle.net/qWzTb/1984/
case 2 is updated in this plunker
http://jsfiddle.net/26yjn8ru/
<div ng-repeat="arr in itr">
<select ng-model="arr.id"
ng-options="value.id as value.name for value in values">
</select>
Just add ng-selected="selected == obj.id" in the option tag
<option value="{{obj.id}}" ng-repeat="obj in values" ng-selected="selected == obj.id" >
{{obj.name}}
</option>
Correct Way would be like :
<select id="select-type-basic" [(ngModel)]="status">
<option *ngFor="let status_item of status_values">
{{status_item}}
</option>
</select>
Value Should be avoided inside option since that will set the default value of the 'Select field'. Default Selection should be binded with [(ngModel)] and Options should be declared likewise.
status : any = "Completed";
status_values: any = ["In Progress", "Completed", "Closed"];
Declaration in .ts file