Develop Reference

AngularJS - Chosen ng-model is not working properly

I'm trying to get value when I select an option from an AngularJS chosen localytics dropdown.
Here's the code for the dropdown:
<select chosen style="width: 250px"
ng-model="StudentId"
ng-options="allStudent.StudentId as allStudent.Name for allStudent in allStudent">
<option value="">Select</option>
</select>
<h2>Chosen with static options: {{ StudentId }}</h2>
<input type="button" value="Search" ng-click="GetStdCourseList(StudentId)">
And in my controller I have the following function:
$scope.GetStdCourseList = function (StudentId) {
alert(StudentId);
};
When I use alert then it show me 'Undefined' instead of showing value
How can I solve this?
Actually this is ok and I get value when I'm not using chosen search but when I use 'chosen' then it's not working.... Here is the screenshot:
Thanks a lot.

I think you have not selected any options before clicking the button. This works fine for me when I select the option.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.allStudent = [{StudentId: 0, Name: 'name1'}, {StudentId: 1, Name: 'name2'}];
$scope.GetStdCourseList = function (StudentId) {
alert(StudentId);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select chosen style="width: 250px"
ng-model="StudentId"
ng-options="allStudent.StudentId as allStudent.Name for allStudent in allStudent">
<option value="">Select</option>
</select>
<h2>Chosen with static options: {{ StudentId }}</h2>
<input type="button" value="Search" ng-click="GetStdCourseList(StudentId)">
</div>

well, since ng-model's object is $scope.something itself, try to
replace
alert(StudentId)
become
alert($scope.StudentId)
and i don't think on this case you will need param. just ignore it because $scope covered it for you
that's will do
edited for better readability

ng-options not populating select options drop down

Hello I have tried implementing the changes provided in several examples yet none seem to work. I do have an ng-model and I clearly define the property of the object I would to receive. However it still does not work.
Any help would be great.
HTML
<select chose ng-model="selected" ng-options="type as type.Name for type in ansExplanOpt">
<option value="">-- Select an Option --</option>
</select>
Controller
$scope.selected = ansExplanOpt.data;
The object is populating (I checked) and the properties it has are Name and Id.
Any help would be great. Thanks

You were very close. Just looks like a misuse of the ng-model value. Your code should be something like
<select chose ng-model="selectedValue" ng-options="type.Id as type.Name for type in ansExplanOpt">
</select>
And the ng-model will be what the user has selected.
Their documentation breaks it down well also:https://docs.angularjs.org/api/ng/directive/ngOptions

Here is solution:
ng-model is the value that user selected.
function TodoCtrl($scope) {
$scope.ansExplanOpt = [
{text:'learn angular', id:1},
{text:'build an angular app', id:2}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<select chose ng-model="select" ng-options="type as type.text for type in ansExplanOpt">
<option value="">-- Select an Option --</option>
</select>
{{select.text}}
<br>
{{select}}
</div>
</div>

You can define which element in the array you want to be preselected:
var myApp = angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
$scope.data = [{
label: 'blah',
value: 'blah'
}, {
label: 'blah1',
value: 'blah1'
}, {
label: 'blah2',
value: 'blah2'
}];
$scope.sel = $scope.data[0];
}]);
html:
<div ng-controller="TestController">
{{sel}}
<select ng-model="sel.value" ng-options="d.value as d.label for d in data">
</select>
</div>
See jsfiddle for more details

How can I make the first character of the dropdown value be deleted if it is a blank space? Angular.js

I have a fairly extensive logic. this is only an example. That's why I need to do something from the view. What ideas can you give me to do it or something simpler not to do it from the controller.
<select class="form-control" ng-model='zoo' id='zoo' name='animal'
ng-options="item as item.animal for item in animals track by item.animal">
</select>
my idea is more or less
<select class="form-control" ng-model='zoo' id='contrato_objetivo' name='animal'
ng-options="item as item.animal.charAt(0)==" "?item.animal.substr(1):item.animal for item in animals track by item.animal">
in the view, how can I delete the first character if it has an initial space?
http://fiddle.jshell.net/3g2pmrom/
thank you!

If you can add a filter which means you are not touching the controller, this will help.
angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function($scope, $modal) {
$scope.obj={ };
$scope.animals=[{"animal":" cat"},{"animal":"dog"}];
}).filter('removespace', function () {
return function (val) {
return (!val) ? '' : val.replace(/ /g, '');
};
});
html
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select class="form-control" ng-model='zoo' id='contrato_objetivo' name='animal' ng-options="item as item.animal for item in animals track by item.animal | removespace">
<option style="display:none" value="">Select</option>
</select>
</div>
fiddle : http://fiddle.jshell.net/eaknm1yh/
the value of the option will be with no space.

how to auto selected value angularjs

drop down are blank i want auto selected value Richard how do this, i am new in angular
<select class="form-control" name="customer" id="customer" ng-model="postjobcustomerCtrl.selectedCustomer" ng-options="customer.full_name for customer in postjobcustomerCtrl.atlasCustomers | filter:{full_name: Profile.full_name} track by customer.user_id"
ng-change="postjobcustomerCtrl.selectDefaultAddress()" required></select>

You'll want to use Angular's ng-Init to set a selected value inline.
<select class="form-control" name="customer" id="customer" ng-model="postjobcustomerCtrl.selectedCustomer" ng-options="customer.full_name for customer in postjobcustomerCtrl.atlasCustomers | filter:{full_name: Profile.full_name} track by customer.user_id"
ng-change="postjobcustomerCtrl.selectDefaultAddress()" ng-init="postjobcustomerCtrl.selectedCustomer = 'Richard'" required></select>

If you have the following...
<select ng-model="item">
<option value="1">Bob</option>
<option value="2">James</option>
<option value="3">Karl</option>
</select>
... and you want James to be picked by default, then in the angular controller, you just do this:
$scope.item = 2;
Like so:
angular.module('app', [])
.controller('ctrl', function($scope){
$scope.item = 2;
});
<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="item">
<option value="1">Bob</option>
<option value="2">James</option>
<option value="3">Karl</option>
</select>
</div>

All you need to do is to initialize your model with appropriate value("Richard") here to to get default value
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope, $http, uiGridConstants) {
$scope.postjobcustomerCtrl ={};
$scope.postjobcustomerCtrl.atlasCustomers =[{"full_name":"Richard"},{"full_name":"Colins"},{"full_name":"Steve"}];
$scope.postjobcustomerCtrl.selectedCustomer =$scope.postjobcustomerCtrl.atlasCustomers[0]
$scope.postjobcustomerCtrl.selectDefaultAddress =function(){
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app ="app" ng-controller="MainCtrl">
<select class="form-control" name="customer" id="customer" ng-model="postjobcustomerCtrl.selectedCustomer" ng-options="customer.full_name for customer in postjobcustomerCtrl.atlasCustomers"
ng-change="postjobcustomerCtrl.selectDefaultAddress()" required></select>
</div>

myApp.Controller("MyCltr, function($scope){
// first fetch data from db
// bind data to drop-down
// then set selected value.
$scope.postjobcustomerCtrl.selectedCustomer = "Richard";
});
And please make sure once your drop-down is binded with data after that set this value.

In your postjobcustomerCtrl, initialize the select ng-model (postjobcustomerCtrl.selectedCustomer) with the id of Richard.
// angularjs controller
atlasCustomers = [{full_name : "Richard", user_id: 1}]
postjobcustomerCtrl.selectedCustomer = atlasCustomers[0].atlasCustomers.user_id;

Select in Angular JS - I need the element and value attribute to be the same

I have a json like this, stored in $scope.result:
{ "tips":["p1","p2","p3","p4"],"actualTip":"p4"}
And I need to do a comboBox with Angular. I did this:
<select class="form-control" id="one" ng-model="actualTip" ng-options="tips for tips in result.tips" ></select>
And its puts me a combobox like this:
<option value="0"> p1 </option>
<option value="1"> p2 </option>
<option value="2"> p3 </option>
I need that the text and value of the option have the same "value".
For ex:
<option value="p1"> p1 </option>
<option value="p2"> p2 </option>
Edit: I forgot to say that I need the combobox starts with the option selected that is in "actualTip"
How can I do this?

Here is a snippet: http://codepen.io/rmadhuram/pen/leukx
Don't worry about the value Angular stores in the options. You will get the correct value you want in the scope variable (you can see that in the console).
Also, you just have to initialize the scope variable with the value you want.
JavaScript:
angular.module('app', [])
.controller('testCtrl', ['$scope', function($scope) {
$scope.result = { "tips":["p1","p2","p3","p4"],"actualTip":"p4"};
$scope.onSelect = function() {
console.log('selected: ' + $scope.actualTip);
};
$scope.actualTip = "p4";
}]);
HTML:
<div ng-app="app">
<div ng-controller="testCtrl">
<select class="form-control" id="one" ng-model="actualTip" ng-change="onSelect()" ng-options="tips for tips in result.tips" ></select>
</div>
</div>