Okay, I really can't find the right term/words to describe this. Basically, I have a select control and a div with ng-repeat
<select ng-model="selectedCode" >
<option value="">ALL</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
<select ng-model="selectedName" >
<option value="">ALL</option>
<option value="John">John</option>
<option value="Peter">Peter</option>
</select>
<div ng-repeat="item in myList" ng-if="item.code==selectedCode && item.Name==selectedName" >
<!--show some data-->
</div>
That code kinda works but I have no idea how to show all if the selected item is "ALL".
This Expression will Display all items with the selected code or name, if the other select is set to "ALL". It will also display all items, if both select boxes are set to "ALL". And it will show only the matching items with the correspondant name and code, if none of the select boxes has been set to "ALL".
ng-if="(selectedCode==item.code || selectedCode=='') &&
(selectedName==item.name || selectedName=='')">
To preselect a value, so the ng-if gets applied directly after page load, you may add an ng-init Expression for setting a default value, like so.
ng-init="selectedCode=''"
ng-init="selectedName='John'"
To put all this into a context, here is an example, showing a table with ng-repeat and the two select boxes for utilizing the ng-if Expression. The code "" and the name "John" are preselected and I added the JavaScript block.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="ngApp">
<select ng-model="selectedCode" ng-init="selectedCode=''">
<option value="">ALL</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
<select ng-model="selectedName" ng-init="selectedName='John'">
<option value="">ALL</option>
<option value="John" selected="selected">John</option>
<option value="Peter">Peter</option>
</select>
<div ng-controller="ngController">
<table>
<tr>
<th>Code</th>
<th>Name</th>
</tr>
<tr ng-repeat="item in myList" ng-if="(selectedCode==item.code || selectedCode=='') && (selectedName==item.name || selectedName=='')">
<td>{{item.code}}</td>
<td>{{item.name}}</td>
</tr>
</table>
</div>
</div>
<script>
angular.module('ngApp', [])
.controller('ngController', function($scope) {
$scope.myList = [ {code:'A', name:'John'}, {code:'B', name:'Peter'}, {code:'C', name:'Peter'} ];
});
</script>
</body>
</html>
Related
can someone tell me how can I make empty value, that if nothing is in list of select, show "n/a"
demo
https://codepen.io/Turqus/pen/wPrKrr?editors=1010
template
<div ng-app="test" ng-controller="select">
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard(selectedBoard)">
<option ng-repeat="item in boards" value="{{$index}}">{{$index}}</option>
</select>
<select class="form-control" ng-model="selectedList">
<option ng-repeat="item in downloadedLists" value="{{$index}}">{{$index}}</option>
</select>
</div>
<option ng-repeat=" item in downloadsLists" >{{$index || "n/a"}}</option>
<select class="form-control" ng-model="selectedList">
<option disabled selected value
ng-show="downloadedLists.length == 0">n/a</option>
<option ng-repeat="item in downloadedLists" value="{{$index}}">{{$index}}</option>
</select>
<option value="">N/A </option>
<option ng-repeat="item in boards" value="{{$index}}">{{$index}}</option>
i want to show this accordion based on category that i select from selectBox,
for now it only show all data, but i want to give some filter.
Here is my code and my database.
anyone know how to do it without change any database or using angularUI accordion?
<div class="cs_member_info">
<select class="cs_member_select">
<option value="A">Type 1</option>
<option value="B">Type 2</option>
<option value="C">Type 3</option>
</select>
</div>
<div class="cs_body" ng-repeat="cs in csList">
<div class="cs_acc_div">
<button class="cs_accordion" ng-class="{'active': isClicked, 'off' : !isClicked}" ng-click="isClicked = !isClicked">
<p class="noti_title">
{{cs.faq.title}}
</p>
</button>
<div class="panel" ng-show="isClicked">
<p class="panel_inside">
{{cs.faq.contents}}
</p>
</div>
</div>
</div>
"_id":"59111a018479e30d387be584",
"lang":1,
"type":"FAQ",
"created_at":"2017-05-09T01:23:13.324Z",
"category":{
"code":1,
"name":"Member information"
},
"faq":{
"title":"Login with SNS ID",
"contents":"Login with SNS ID"
}
Check this as a reference. default angular filter
https://plnkr.co/edit/PpWo28ZO6QNiKEo1K5K7?p=preview
Here it is a table. use accordion to repeat and then filter it
Check this documentation https://docs.angularjs.org/api/ng/filter/filter
<label>Name only
<select ng-model="search.name">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Mary">Mary</option>
</select>
</label>
<br>
<table id="searchObjResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friendObj in friends | filter:search:strict">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
</table>
<select class="form-control" id="selectrequest" ng-model="selectedrequest">
<option value="pending" > Pending </option>
<option value="approved"> Approved </option>
<option value="rejected"> Rejected </option>
</select>
<tr ng-repeat="mymodel in vm.modelname | filter:selectedrequest">
<td>{{mymodel.name}}</td>
<td>{{mymodel.triggername}}</td>
<td>{{mymodel.status}}<td>
</tr>
vm.modelname=[{
name:'Peter',
triggername:'Peter1',
status:pending
},{
name:'Jack',
trigger name:'Jack Hein',
status:approved
}]
Prob stint: by default pending status is selected and corresponding data is populated. let me know if further clarification is needed.
Declare a variable using $scope as:
$scope.selected_request = "Pending";
With this by default your intended data is selected.
Please made changes in your select tag like below. It will make "approved" selected by default and also populate your table according to selection.
Hope it will help.
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<select class="form-control" id="selectrequest" ng-init="selected_request='approved';selected_requested()" ng-model="selected_request" ng-change="selected_requested()">
<option value="Pending"> Pending </option>
<option value="approved" > Approved </option>
<option value="rejected"> Rejected </option>
</select>
<div ng-repeat="temp in model | filter:(!!selected_request || undefined) && {status: selected_request} ">
<span ng-bind="temp.name">
</span>
</div>
<br/> Items in filtered Array
<br/>
<div ng-repeat="temp in filteredArray">
<span ng-bind="temp.name">
</span>
</div>
</div>
</body>
I'd like to make orderBy based on multiple select menu. for example:
Order :
<select ng-model="filterOrder">
<option value="+">- to +</option>
<option value="-">+ to -</option>
</select>
Column:
<select ng-model="filterColumn">
<option value="name">Name</option>
<option value="age">Age</option>
</select>
<div ng-repeat="user in users|orderBy:'filterOrder.filterColumn'">
{{user.name}} {{user.age}} <br>
</div>
Thanks!
You want to use the reverse argument of orderBy
<div ng-repeat="user in users|orderBy:filterColumn: filterOrder == '-'">
The expression filterOrder == '-' will return a boolean for that argument
Why is this repeater broken
<select name="quarter" ng-model="Quarter" ng-selected="Quarter" >
<option ng-repeat="v in [1,2,3,4]" value="{{v}}">Q{{v}}</option>
</select>
But not the handwritten way?
<select name="quarter" ng-model="Quarter" ng-change="onQuarterChange()" ng-selected="Quarter">
<option value="1">Q1</option>
<option value="2">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
stick with ng-options
<div ng-app>
<h2>Todo</h2>
<div ng-controller="QuarterController">
<select name="quarter" ng-model="Quarter" ng-options="obj.value as obj.text for obj in [{'value': 1,'text' : 'Q1'},{'value':2,'text':'Q2'},{'value':3,'text':'Q3'},{'value':4,'text':'Q4'}]">
</select>
</div>
</div>
function QuarterController($scope) {
$scope.Quarter = 2;
}
http://jsfiddle.net/hDNsm/3/
you might as well define the array in your controller
Notice two things:
'ng-selected' directive should be written on the 'option' element and not on the 'select' element.
the content of the 'ng-selected' attribute should be a condition in which the option is selected. a simple example for this could be if the value of the option equals the select model.
Your code should be something like this:
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" value="{{v}}" ng-selected="v==Quarter">Q{{v}}</option>
</select>