I have a select cascade, but I currently can't capture the first selected option, only the one of the second select.
I want to capture the two options selected by the user when the second selection is changed, so I could send this information to an asynchronous request.
HTML code:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script>
function ListDropdown($scope){
$scope.ccvms={lista01:['1','3','5','7','9'],lista02:['2','4','6','8','10']}
$scope.send=function(x){
console.log(x)
}
}
</script>
</head>
<body>
<div ng-controller="ListDropdown">
<select ng-model="nums" ng-options="ccvm for (ccvm, nums) in ccvms"></select>
<select ng-disabled="!nums" ng-model="num" ng-options="num for num in nums" ng-change="send(num)"></select>
</div>
</body>
</html>
You'll need to make the first select's model to be the key (rather than the value), and then use obj[key] as the source of the second ng-options.
<select ng-model="ccvm"
ng-options="ccvm as ccvm for (ccvm, nums) in ccvms"></select>
<select ng-model="num"
ng-disabled="!ccvm"
ng-options="num for num in ccvms[ccvm]"
ng-change="send(num, ccvm)"></select>
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 have created an array example. There is a text box that accepts the number and on clicking on add, it adds the number to a defined array. And on display i want it to display the array. But what is happening is, as soon as i click on add button, the number simultaneously is being displayed on the HTML page. I guess its because of ng-model, but i want it to be displayed only when i click on display button. Please help.
<html ng-app="Swabhav.Array">
<head>
<title>Array</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="ArrayController">
<input type="text" ng-model="arraynumber">
<button type="button" value="Add" ng-
click="addElementToArray(arraynumber)">Add</button>
<button type="button" value="Display" ng-
click="displayElementsInArray()">Display</button>
<li ng-repeat="element in elements track by $index ">
<h4> {{element}} </h4>
</li>
</div>
<script>
angular.module("Swabhav.Array",[])
.controller("ArrayController",
["$scope","$log",function($scope,$log){
$scope.numbers=[];
$scope.number="";
$scope.addElementToArray=function(number){
$scope.numbers.push(number);
$log.log("inside add "+ $scope.numbers)
}
$scope.elements=[];
$scope.displayElementsInArray=function(){
$log.log("Inside Display")
$scope.elements.push($scope.numbers);
}
}])
</script>
</body>
</html>
You can try like the below code, also check this working plunker link for your example scenario.
Controller:
$scope.numbers=[];
$scope.elements=[];
$scope.addElementToArray=function(number){
$scope.numbers.push(number);
$scope.arraynumber='';
};
$scope.displayElementsInArray=function(){
angular.extend($scope.elements, $scope.numbers)
};
Can we display alias name in the select options of dropdown using Angular JS
Issue :
Trying change Boolean value true to Ascending and false to Descending in the display of dropdown options and also trying to retain boolean value on selection of alias name - Ascending or Descending
HTML:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Trying to show dropdown options Ascending or Descending instead of true or false<br><br>
<select ng-model="selectedName" ng-options="x.ascending for x in names">
</select><br><br>
{{selectedName}}
</div>
</body>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [{"name":"xxxx","ascending":true},{"name":"yyyy","ascending":false}];
});
http://codepen.io/nagasai/pen/ZBMLep
If you wish to show Ascending/Descending instead of true/false then you can just add one ternary condition like below.
<select ng-model="selectedName" ng-options="(x.ascending ? 'Ascending' : 'Descending') for x in names track by x.ascending"></select>
I have an input box in which user will enter text. Based on this text my UL list items should get filtered. For eg, on "Ab" in text box - Only Abbas and Abid must show in the <li> tags of the UL list.
index.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angularScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" />
<ul><li ng-repeat="x in people">{{x.name}}</li></ul>
</body>
</html>
angularScript.js
//1. appDeclaration
var app = angular.module('myApp',[]);
//2. controllers
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
$scope.people = [{"name":"Abbas"},{"name":"Tina"},{"name":"Abid"}];
});
Can someone help me out with some filter based on text in input so that only those lis are populated which match with the texts in input box?
First you'll need an ng-model in your <input> element.
<input ng-model="filter" type="text" />
And then your ng-repeat would look like:
<li ng-repeat="x in people | filter:filter">{{x.name}}</li>
Ref. https://docs.angularjs.org/api/ng/filter/filter
I am new to AngularJS. I am trying to get a simple search based on the users name, which in my case is not stored on the top most layer. Here is the example:
<div ng-init="users = [
{'fields':{'name':'Mary Brown','person_nickname':'M'},'username':'mbrown'},
{'fields':{'name':'John Smith','person_nickname':'J-Dog'},'username':'jsmith'}]">
</div>
Here is the plnkr that searches all the fields I want to take this and make it such that it only searches fields.name. In this plunker, I could type "dog" and still get the second user returned, which is not what I want.
I tried changing my input ng-model to search.fields.name but when I do that, the search doesn't activate at all. I can type in any string into the text box and nothing is filtered out.
What am I missing? Thank you!
EDIT:
Full code since plunker is currently down:
<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-init="users = [
{'fields':{'name':'Mary Brown','person_nickname':'M'},'username':'mbrown'},
{'fields':{'name':'John Smith','person_nickname':'J-Dog'},'username':'jsmith'}]">
</div>
Name only <input ng-model="search.fields"><br>
<table id="userTable">
<tr ng-repeat="user in users | filter:search">
<td>{{user}}</td>
</tr>
</table>
</body>
</html>
Plnkr is not running right now, but if you have an ng-repeat which you want to filter, then look at the official docs, especially upvoted comments are useful: http://docs.angularjs.org/api/ng.filter:filter
item in myArray | filter:{propertyThatWillBeFiltered: value}
If you are talking about searching inside your model, then you should use "filter" method on an array.