Develop Reference

How to save selected option(dropdown box) in AngularJS

I want to save selected color value from dd box into $scope.color.
Index.html:
<label class="item item-select" name="selectName">
<span class="input-label">What is your favourite colour?</span>
<select id="colorid">
<option ng-repeat="x in colorList"{{x}}</option>
</select>
</label>
controller.js:
var colorCtrl = function($scope){
$scope.color = "";
$scope.colorList =["red","blue","yellow"];
console.info("color is "+$scope.color);
}

For binding value, use ng-model:
<select id="colorid" ng-model="color">...
for trigger event, use ng-change (calls $scope.onChange() ):
<select id="colorid" ng-model="color" ng-change="onChange()">...
And be careful to your options format! (it is the value which is binded, not the content!)
Full code:
<label class="item item-select" name="selectName">
<span class="input-label">What is your favourite colour?</span>
<select id="colorid" ng-model="color" ng-change="onChange()">
<option ng-repeat="x in colorList" value="{{x}}">{{x}}</option>
</select>
</label>
And JS:
var colorCtrl = function($scope)
{
$scope.color = "";
$scope.colorList =["red","blue","yellow"
];
$scope.onChange = function()
{
//trigerred on color change
console.info("color is "+$scope.color);
}
}

You aleady got many answers here.Just for add on i will suggest you to do this way:
<select style="background:{{color}}" ng-model='color' ng-options='color as color for color in colorList' ng-change='selectionChanged(color)'>
</select>
or you can also try with
<select ng-model='color' ng-change='selectionChanged(color)'>
<options style="background:{{color}}" ng-repeat="color as color for color in colorList" value={{color}}>
{{color}}</options>
</select>

First, there is a syntax error in your code.
In you want to take input from the DOM you have to tell angular which variable to store the input in.
This is done via the ng-model directive.
As given in the documentation.
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope using NgModelController, which is
created and exposed by this directive.
ngModel is responsible for:
Binding the view into the model, which other directives such as input,
textarea or select require.
Providing validation behavior (i.e.
required, number, email, url).
So, if I want to take input I will initialise the input element as,
<input type="text" ng-model="val" />
Via this, I have initialised a variable "val" on the scope (The Model) and I have told angular, whatever input is entered into the input element will be bound to that variable.
<label class="item item-select" name="selectName">
<span class="input-label">What is your favourite colour?</span>
<select id="colorid" ng-model="color">
<option ng-repeat="x in colorList">{{x}}</option>
</select>
</label>
Please check this example.

AngularJS model based input value empty when disabled

AngularJS client application.
I have a form with two text inputs and a drop down listbox. Only one of the two text inputs is enabled, the selected item in the listbox determines which input is enabled.
The two text inputs are associated with fields in the model. However, when a text input is disabled, I would like the value to be cleared, not visible in a disabled state. When the input is enabled again, the model value should be displayed.
What is the best way to achieve this with AngularJS?

Angular Expression can be used with ngDisabled directive.
Use ternary operator to check if selected value is equal to name of the input field and based on that set ngDisabled.
If the expression is truthy, then the disabled attribute will be set on the element.
Something like this in your html template.
ngDisabled = "($scope.input_model_variable_name != $scope.select_model_variable_name)?true:false"

One way to go about it would be
Call a function on ng-change on select.
-- copy all the values to restore later
-- blank all the text fields except for the field you want to edit
Have a function for ng-disable
-- disable the not selected text box
-- enable the rest
var app = angular.module('testApp', []);
app.controller('MainCtrl', function ($scope) {
var modelCopy = {
inputTextField1: "",
inputTextField2: ""
};
$scope.data = {
inputTextField1: "",
inputTextField2: "",
selectedInputField: ""
};
$scope.inputFieldChanged = function () {
angular.forEach(modelCopy, function (value, key) {
modelCopy[key] = $scope.data[key];
if (this.selectedInputField === key) {
this[key] = value;
} else {
this[key] = "";
}
}, $scope.data);
};
$scope.toggleDisability = function (fieldToEnable) {
if ($scope.data.selectedInputField === fieldToEnable) {
return false;
} else {
return true;
}
};
});
HTML
<div ng-controller="MainCtrl">
<div class="container">
<form novalidate="novalidate" class="form-horizontal">
<div class="form-group">
<label for="selectInputFieldToEdit" class="control-label col-sm-2">Select Input Field to Edit</label>
<div class="col-sm-6">
<select class="form-control" ng-change="inputFieldChanged()" id="selectInputFieldToEdit" ng-model="data.selectedInputField">
<option value="inputTextField1">Field 1</option>
<option value="inputTextField2">Field 2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputTextField1" class="control-label col-sm-2">Input Text Field 1</label>
<div class="col-sm-6">
<input id="inputTextField1" type="text" ng-model="data.inputTextField1" name="inputTextField1" class="form-control" ng-disabled="toggleDisability('inputTextField1')" />
</div>
</div>
<div class="form-group">
<label for="inputTextField2" class="control-label col-sm-2">Input Text Field 2</label>
<div class="col-sm-6">
<input id="inputTextField2" type="text" ng-model="data.inputTextField2" name="inputTextField2" class="form-control" ng-disabled="toggleDisability('inputTextField2')" />
</div>
</div>
</form>
</div>
</div>
Here is a jsFiddle https://jsfiddle.net/hheymu/jpydjuhp/

How to add data from scope to select box

I'm fairly new to angular, so hopefully this is a super simple question for someone to nail.
I have a form (cut down version below) that I want to be able to have a live preview being shown as the user fills in the form.
All was going well with standard fields, however I've hit a roadblock with <select> fields.
<div ng-app="jobcreate">
<div class="row fullWidth" ng-contoller="JobCtrl">
<div class="medium-6 columns">
<form method="POST" action="http://localhost:3030/job/create" accept-charset="UTF-8">
<label for="title">Enter a title</label>
<input placeholder="title" id="title" required="required" ng-model="job.title" name="title" type="text" />
<br />
<label for="title">Pick template</label>
<select ng-model="job.template" ng-options="template.Name for template in templates" name="template"></select>
</form>
</div>
<div class="medium-6 columns">
<div class='job-detail {{ job.template || "default" }}'>
<h2>{{ job.title || "Enter a title"}}</h2>
<h2>{{ job.template || "Pick a template"}}</h2>
<pre>Templates: {{templates | json}}</pre>
</div>
</div>
</div>
</div>
And here is the js:
angular.module('jobcreate', []).controller('JobCtrl', function($scope) {
$scope.templates = [
{ID:'default', name:'Default'},
{ID:'obnoxious', name:'Obnoxious'}
];
});
I have a jsfiddle here so you can see it in action: http://jsfiddle.net/2m8jm/4/
As you can see, entering something in the title field works as intended, but I'm struggling to get the contents of the $scope.colors to fill in the select field

In your fiddle : http://jsfiddle.net/2m8jm/4/, you have choosed templates as an data array for ng-options but there is not scope variable named templates in the controller JobCtrl. I have renamed $scope.colors to $scope.templates and modified the ng-options bit - ng-options="template.ID as template.name for template in templates".
Here is a working plunker : http://plnkr.co/edit/wsbxkjRqTEU2yfcHOV0D?p=preview
Update
Is there a way to not have the first empty value be in the select field?
Yes, Couple of ways.
1) Initialize job.template with some default value in your markup as :
<label for="title" ng-init="job.template='obnoxious'">Pick template</label>
<select ng-model="job.template" ng-options="template.ID as template.name for template in templates" name="template"></select>
2) Define controller as follows to set default value for job.template inside the controller :
.controller('JobCtrl', function($scope) {
// some other codes
$scope.job = {};
$scope.job.template = 'default';
});

Display object information based on selected option

I'm using Angular for a SPA I'm working on. I have an array which contains objects for each user on my site. I have an ng-repeat to add all the users to my dropdown list. I'm trying to figure out how do I display specific user information in an input box based on the selected user from the drop down?
<select id="entityDropDown" ng-options="user.name for user in users" ng-change="userInfo(user)"></select>
<div>
<label for="entityId">ID: </label>
<input type="text" id="entityId" disabled ng-model="{{user.id}}"/>
</br>
<label for="entityDomain">Domain: </label>
<input type="text" id="entityDomain" disabled ng-model="{{user.domain}}"/>
</div>
app.controller('userCtrl',
function userCtrl($scope,siteCollection){
$scope.users = siteCollection.getUsers();
}
);

K I solved the issue.
First of all, this ng-model="{{user.domain}}" isn't how you use ng-model. I had to change them to remove the curly braces ng-model="user.domain".
I modified the select as such:
<select id="entityDropDown"
ng-model="selectedUser"
ng-options="user as user.name for user in users"
ng-change="userInfo(selectedUser)">
</select>
This is my controller function:
spApp.controller('userCtrl',
function userCtrl($scope,siteCollection){
$scope.users = siteCollection.getUsers();
$scope.selectedUser = {};
$scope.userInfo = function(user) {
$scope.selectedUser = user;
};
}
);
Basically the controller gets all my users and puts it in a user object. The select goes through each user and generates the options. When the selected option changes, the ng-change passes the selected user object to the userInfo function and the html populates with that objects information.

you can append ng-model="selectedUser" to your select and in your userCtrl
<!-- template.html -->
<select id="entityDropDown" ng-options="user as user.name for user in users" ng-model="selectedUser">
</select>
<div class="user-info" ng-show="selectedUser">
<p> {{selectedUser.name}}</p>
<!-- ... -->
</div>
in your controller
// controller.js
function userCtrl($scope, siteCollection){
$scope.users = siteCollection.getUsers();
$scope.$watch('selectedUser', function(oldVal, newVal) {
if (oldVal === newVal) return;
//do something like call JSON if need it
});
}
When the <select> changes the $scope.selectedUser changes to selected value. later you can use the selectedUser variable like holder for your show the info into other place like in the div.user-info or you can use $scope.$watch('selectedUser'... for fire other behavior like call a services or whatever
using your template
<select id="entityDropDown" ng-options="user in users" ng-model="selectedUser">
<!-- <option ng-repeat="user in users">{{user.name}}</option> -->
</select>
<div>
<label for="entityId">ID: </label>
<input type="text" id="entityId" disabled ng-model="selectedUser.id"/>
</br>
<label for="entityDomain">Domain: </label>
<input type="text" id="entityDomain" disabled ng-model="selectedUser.domain"/>
</div>

Angular Changing filter based on select value and text input

I am new to Angular so I think this is a basic concept that I'm just missing some step on. I want to have a search that does basic angular filtering, but I want to have a separate select that chooses what the text input searches on. Currently it looks like this:
Search inputs:
<input type="text" class="form-control" id="search-users" ng-model="userQuery">
<span class="input-group-btn">
<select ng-model="searchOn" ng-change="setSearchOn(searchOn)">
<option value="CustomerId" selected>CustomerId</option>
<option value="Username">Username</option>
</select>
</span>
Function:
$scope.setSearchOn = function(searchOnIn){
console.log("setting searchOn to "+searchOnIn);
$scope.searchOn = searchOnIn;
}
Repeater:
<div ng-repeat="user in users | filter:userQuery.searchOn">
I feel like i shouldn't even need the function, shouldn't i be able to data-bind the value of the select to the filter on the repeater? I couldn't get that to work either. Help would be appreciated. Angular is awesome, but the beginning learning the way it works is a little rough :)

As I understand it, we want to pick the property which we search on with the dropdown, and then search that property for value on the userQuery input.
One way to accomplish that is to (re)build an object to filter with when either userQuery or searchOn alters.
var app = angular.module('myapp', []).controller('ctrl', function($scope){
/* some test data */
$scope.users = [{CustomerId : 1, Username : 'Pete'},
{CustomerId : 2, Username : 'John'},
{CustomerId : 3, Username : 'Claus'}]
$scope.setSearchFilter = function()
{
$scope.searchFilter = {};
$scope.searchFilter[$scope.searchOn] = $scope.userQuery;
}
})
In the html, I've set an ng-change on both the userQuery and searchOn to update the search filter.
<div ng-controller="ctrl">
<input type="text" class="form-control" id="search-users" ng-model="userQuery" ng-change="setSearchFilter()" />
<span class="input-group-btn">
<select ng-model="searchOn" ng-change="setSearchFilter()">
<option value="CustomerId" selected>CustomerId</option>
<option value="Username">Username</option>
</select>
</span>
<div ng-repeat="user in users | filter:searchFilter">
{{user.CustomerId}} -- {{user.Username}}
</div>
</div>
http://jsfiddle.net/nwdx7/1/