Ng-click does not work on an option so I am wondering how it might be possible to change the Select class depending on which option is selected.
<select ng-class="paymentStatus ? 'Authorized' : 'Capture'">
<option>Authorized</option>
<option>Capture</option>
</select>
you need to track what option is selected. Rather than defining your options, use ng-options and assign the <select> a model.
<body ng-app="TestApp">
<div ng-controller="TestController">
<select ng-model="paymentStatus"
ng-options="options for options in opts"
ng-class="paymentStatus == 'Authorized' ? 'authorized' : 'capture'">
</select>
</div>
</body>
Your ng-class what close, but you cant just test if its set or not. If its == to "Authorize", set the class to authorize else set it to capture
In your controller, you set what the default paymentStatus is
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope)
{
$scope.opts = ['Authorized','Capture'];
$scope.paymentStatus = $scope.opts[0];
});
and your css can be something like this:
.authorized {
background-color:green
}
.capture {
background-color:red
}
jsfiddle
Related
I have a select box which I am using with an angular object as the value i.e.
{identityName:'Passport',identityId:1}
<select name="identityProof" ng-model="identityProof" ng-change="changeProofOfIdentity()" ng-options="identity as identity.identityName for identity in identityProofList track by identity.identityId" id="identityProofList" class="form-control" data-placeholder="" size="1"></select>
I have Done this setup so I can get identity id and identity label in ng-onchange function.
As you can see I have used track by identity.identityId I wanted to select the option by only by identityId only i did
$scope.identityProof = {identityId:userDetails.identityId,identityName:""};
Now the option with the given value get selected, but when I try to get the $scope.identityProof i.e. select box value, I only get the identityId, not the identityName, as I can see the option selected have both the name and values, how can I get both? Do I need to manage it by using jquery or javascript by getting the label of the selected value and passing it as identityName? Or there is an option by which I can reload the selected object to have both the values?
You can use simple select instead of ng-option. See the following example and let me know.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select name="identityProof" ng-model="identityProof" size="1">
<option ng-repeat="identity in identityProofList" value="{{identity}}">
{{identity.identityName}}
</option>
</select>
<span ng-if="identityProof">Selected value = {{identityProof}}</span>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.identityProofList = [{'identityName':'Passport','identityId':1}];
});
</script>
</body>
</html>
I am new to angularjs and just started learning it. I am trying to build a dropdown equivalent from angularjs without using select.
Html
<div ng-app="App" ng-controller="OrderExportCtrl" >
<li class="box-ddl" >
<div ng-model="fruit" ng-options="f for f in fruits" class="ddlListSmall">
</div>
</li>
JavaScript
var app = angular.module('App', []);
app.controller('OrderExportCtrl', function ($scope) {
$scope.fruit = ['apple', 'orange', 'mango', 'grapefruit', 'banana', 'melon'];
});
Please find the JsFiddle here. I am not getting what mistake I am doing, but my dropdown is not binding.
Please guide me to fix my issue.
ngOptions is only for select elements (it is used by the select directive). You can use ngRepeat to achieve the same result. You can use ngClick to set your model directly.
<div class="list">
<div class="option" ng-repeat="f in fruits" ng-bind="f"
ng-click="fruit.selected = f"></div>
</div>
Make sure the value you're setting is inside an object that is defined in the controller, otherwise you'll just set it inside the row's scope rather than the controller's. Alternatively use ng-click="$parent.fruit = f" to reference the parent scope, which in this case is the controller's (but may not always be).
I have a status filed deep nested to 3 levels in my model, I want to apply different classes to a div based on the value of the status. In order the save the typing and keep the html tidy, I wanted to apply short name to this status so I used ng-init to copy the values and use ng-class on ng-init variable. But ng-init gets its value only once, when I change the status again in controller it doesnt change but holds the old value. Is there a way to give short names to response.obj1.obj2.status at least inside a div?
<div ng-app="app">
<div ng-controller="statusCtrl">
<button ng-click="toggle()">toggle</button>
<div id="section1" ng-init="s1Status=response.section1.status">
<div id="statusIndicator" ng-class="{'success':s1Status==0,'error':s1Status==1}">Status</div>
</div>
<span>{{response.section1.status}}</span>
</div>
var app = angular.module('app', [])
app.controller('statusCtrl', function ($scope) {
$scope.response = {
section1: {
status: 1
}
};
$scope.toggle = function () {
if ($scope.response.section1.status === 0) $scope.response.section1.status = 1;
else $scope.response.section1.status = 0;
}
});
Demo: http://plnkr.co/edit/ES7rgf97BPFAWzkfIEhw?p=preview
EDIT:
Knockout JS has nice way to do this, where you can bind a model at any level to a div and any models referred inside that div will work with the parnet model as context. Thats what I'm looking for.
<div id="section1" data-bind="response.section1">
<div id="statusIndicator" data-bind=" css:{success:status==0, error:status=1 }">Status</div>
</div>
I have an array of objects and when i go to populate the select with the elements, it doesn't pre-select the currently active one. If i change the select it all works as intended, but the pre-selected element is not selected on page load.
JS:
$scope.license_year_list = [
{label:"Year of 1991", value:1991},
{label:"Year of 1992", value:1992} ];
$scope.item = {license_year: {label:"Year of 1992", value:1992}};
HTML:
<div ng-controller="MyCtrl">
<select ng-model="item.license_year"
ng-options="y.label for y in license_year_list">
</select>
</div>
Fiddle:
http://jsfiddle.net/eXvH8/
Angular checks for equality based on reference of the actual object/value. To make your select box start out with the default value, do a simple assignment of the default value. Change your code like this:
HTML:
<div ng-controller="MyCtrl">
<select ng-model="item" ng-options="y.label for y in license_year_list"></select>
<br/><br/><br/>
{{item.license_year}}
</div>
JS:
function MyCtrl($scope) {
$scope.license_year_list = [{label:"Year of 1991", value:1991}, {label:"Year of 1992", value:1992}];
$scope.item = $scope.license_year_list[1];
}
The equality of the objects are evaluated by reference, so you need use the exactly same object when you want to select it.
$scope.item = {
license_year: $scope.license_year_list[1]
};
In my case AngularJS's select is not a good fit - (with ng-repeat approach <option> values can only be strings and with ng-options I can't properly set the initial selected value).
What can I do to stop angular from applying select directive everywhere he sees <select> element ?
The reason I am asking this question, is because I want to apply a custom directive on select element, that would perform something similar like the original one, so they would be conflicting.
Is this what you need?
HTML:
<div ng-app="angularApp">
<div ng-controller="testCtrl">
<select ng-model="initialSelectedValue" ng-options="option for option in [1,2,3]"></select>
</div>
</div>
Javascript:
angular.module('angularApp', []);
function testCtrl($scope)
{
$scope.initialSelectedValue = 2;
}
I created the following jsfiddle for it.