We Keep Coding

Select tag value in html disappears when selecting a value in angularjs

I have a select tag in html which has a value from angularjs. Everytime I select a value, the select tag will be empty. Why? How to fix it?
$scope.getAll = function(){
$http.post()....
$scope.places = response.data;
};
$scope.getAll();
$scope.sample = function(str){
alert(str);
};
HTML
<select ng-model="val" ng-change="sample(val)">
<option ng-repeat="place in places" value="place.name">{{place.name}}</option>
</select>
In code above, when I select some value of the select tag it alerts me the value but the select tag goes empty!

i recommend instead of using ng-repeat use ng-options
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.places = [ {name: 'California'},
{name: 'New York'},
{name: 'Cochin'}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="val" ng-change="sample(val)" ng-options="place.name as place.name for place in places">
</select>
{{val}}
</div>

When setting the value of the option as an expression, try using ng-value .
While your question is confusing, I'm guessing that the alert shows up as place.name
<select ng-model="val" ng-change="sample(val)">
<option ng-repeat="place in places" ng-value="place.name">{{place.name}}</option>
</select>
Or if you want to set the value of the select attribute itself, you can use,
<select ng-model="val" ng-change="sample(val)">
<option ng-repeat="place in places" value="{{place.name}}">{{place.name}}</option>
</select>
https://plnkr.co/edit/fAbqV1wG2VuF069lt3bm?p=preview
This might be able to guide you further.

AngularJS - ng-change not firing

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

Passing an ng-model value to an object

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 )
}

Input type[file] doesnot display the name of the file. Angularjs

I am new to angularjs. The project is getting transitioned from jquery to angular. Initially, it was a nightmare with all the new terms and scarry topics. I am getting used to it now and actually enjoying working on angular.
I am stuck at one part and i hope someone could help me or suggest me here. Please refer to the jsfiddle.
http://jsfiddle.net/ash12/kk1s3a1d/12/
Here is th HTML code....
<div ng-controller="ListController"><br>
 File:
                
  Name:   
  City:<br/>
<input type='file' ng-model="activeItem.name">
<select name="singleSelect" ng-model="activeItem.content">
<option value="" disabled="" selected="" style="display:none;">Select Name</option>
<option>Rob</option>
<option>Dilan</option>
</select>
<select name="singleSelect1" ng-model="activeItem.content1">
<option value="" disabled="" selected="" style="display:none;">Select City</option>
<option>China</option>
<option>Korea</option>
<option>United States</option>
</select>
<button ng-click="addItem()">+</button><br>
<ul>
<li ng-repeat="item in items">  <a>{{item.name}}</a><a>{{item.content}}</a>
     <a>{{item.content1}}</a>
</li>
</ul>
</div>
Here is the controller function...
function ListController($scope) {
$scope.items = [{
}];
$scope.activeItem = {
name: '',
content: '',
content1:''
}
$scope.addItem = function () {
$scope.items.push($scope.activeItem);
$scope.activeItem = {} /* reset active item*/
}
}
Here, if i select the file name, name and city and then press on add button. It shows the list below. The problem is that it doesnot show the file which we have selected.
Can someone please tell me what to do in this case ? Also, i need the click button to be active only for 6 times. after adding the 6th time, it should not let me add any further. can someone suggest here ??

You need to do that by handling the onchange event of the file input
<input type='file' onchange="angular.element(this).scope().fileNameChanged(this)">
and In your controller
$scope.fileNameChanged = function(el){
$scope.activeItem.name = el.files[0].name
}
To disable your add button, in your additem check for the length of your items array and disable the button using ng-disabled
See the updated fiddle here : http://jsfiddle.net/kk1s3a1d/15/

here is the working jsfiddle of your problem
http://jsfiddle.net/adiioo7/fA968/
you need to use onchange as mentioned below as ng-model and ng-change doesnt work with input type="file"
<input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage(event)" />

Get selected option in dynamic Angular dropdown

I want have a simple select:
<ion-view view-title="fc" id="fcs">
<ion-content>
<div id="params-container">
<select ng-model="value1" ng-options="value for value in params1 track by value" ng-change="update()"></select>
</div>
</ion-content>
</ion-view>
And in the controller:
angular.module('filedetails.controller', [])
.controller('FileDetailsCtrl', function($scope, $stateParams, FilesService, ProcessFileService, FCSModel) {
$scope.params1 = ["FSC-A", "FSC-H", "FSC-W", "SSC-A"];
$scope.update = function(){
console.log('scope.axisX is');
console.log($scope.axisX);
}
});
And in app.js I have:
.state('file-detail', {
url: '/files/:id',
templateUrl: 'js/files/details/template.html',
controller: 'FileDetailsCtrl'
})
I want to get the selected value but somehow when i select a value in the dropdown, it always outputs undefined. What can I be doing wrong? Im using AngularJS v1.3.13.

You need to do it like this:
<select ng-model="axisX" ng-options="value as value for value in params1" ng-change="update()"></select>
or like this:
<select ng-model="axisX" ng-options="value for value in params1 track by value" ng-change="update()"></select>
With first approach you will get:
<option value="0">FSC-A</option>
<option value="1">FSC-H</option>
With second approach you will get:
<option value="FSC-A">FSC-A</option>
<option value="FSC-H">FSC-H</option>
Here is the working plunker

I assume your setup is wrong. Your code works on jsfiddle, at least as soon as I add the ng-controller tag: https://jsfiddle.net/wg5dtb8o/
<div ng-controller="MyCtrl">
<select ng-options="value for value in params1" ng-model="axisX" ng-change="update()"></select>
</div>