<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>
Related
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>
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>
I was trying to pass the dynamically created model value to my controller. The div and model was created dynamically. But i can't fetch the model value in my controller.
This is the model part.
<div ng-repeat="cnt in countDiv">
<div id="subDiv_{{cnt}}" >
<select ng-model="Id_['{{cnt}}']" ng-change="getDetails(cnt)">
<option value="">Select</option>
<option ng-repeat="Data in details">{{Data.name}}</option>
</select>
</div>
</div>
How can I get this model valueng-model="Id_['{{cnt}}']" in my controller ?
I works for me
<div ng-repeat="cnt in countDiv">
<div id="subDiv_{{cnt}}" >
<select ng-data-model="Id_{{cnt}}"ng-change="getDetails(cnt);">
<option value="">Select </option>
<option ng-repeat="Data in details">{{Data.name}}</option>
</select>
</div>
I have done similar as your for dynamic model .
$scope.inputs = ['foo','bar'];
$scope.filter={
'foo':"Foo",
'bar':"Bar"
}
});
and i implemented using ng-repeat like this
<div ng-repeat="filter in filters">
<input type="text" ng-model= "'Id_'+ filter" />
</div>
If i understood you right, i have made a plunker .This might help you.
I am new to angularjs. I want to add a placeholder to my dropdown.
I am not hard coding my dropdown values, it's coming from some where. Can you tell me where i did mistake.
<div class="row form-group">
<label class="col-md-3">Action<span style="color: #b94a48">*</span></b></label>
<div class="col-lg-3 col-md-7" style="padding: 0px;">
<div class="dropdown select" style="width: 100%;">
<select name="wlOrdActType" class="dropdown multiple" placeholder="-- Please Select --"
ng-model="wlOrdActType"
ng-options="obj.name as obj.name for obj in ordertypeList"
style="width: 100%;">
<option></option>
</select>
</div>
</div>
</div>
Here every thing is working. But placeholder is not place on the dropdown
<option value="" disabled selected>Please Select</option>
You can do something like this:
<select ng-model="wlOrdActType" ng-options="obj.name as obj.name for obj in ordertypeList">
<option value="" selected="selected">Choose one</option>
</select>
Could also try this:
<select required class="form-control" ng-model="myModel"
ng-options="item as item.title for item in list">
<option value="" label="-- Select option --" disabled selected="selected">
</option>
</select>
While having the model set to an empty string in the controller.
$scope.myModel = "";
I am using Angular v1.6.6. So, check for older version's compatibility. I believe the below code should work v1.5 onwards.
$scope.ordertypeList = ordertypeListFromApiCall; // Get the collection from API
$scope.ordertypeList.splice(0,0, {'id' : '', 'name' : 'Select Order Type...' } );
$scope.wlOrdActType = $scope.ordertypeList[0];
And in the HTML,
<select class="form-control" ng-model="wlOrdActType" required ng-options="ordertype.name disable when ordertype.id == '' for ordertype in ordertypeList track by ordertype.id">
</select>
In the itemSelected function, make sure that the id of $scope.wlOrdActType is not empty
I want to filter my table using select value. In my code below, using input type=text... filter works just fine. But i don't know how to filter using select value.
<div class="columns large-2-5">
<select name="categorySelector"
class="selectbox"
ng-model="search"
ng-options="category.name for category in categories">
<option value="">Select Category</option>
</select>
</div>
<div class="row">
<input type="text" ng-model="search.name">
<table class="grid">
<tbody ng-repeat="image in imageList | filter: { category: search.name }">
<tr photolistsetting-Directive
title="{{ image.name }}"
ref="{{ image.url }}"
category="{{ image.category }}">
</tr>
</tbody>
</table>
</div>
select list is made of objects. Maybe i can't access an object property ?
Thank you.
Use this:
<select name="categorySelector"
class="selectbox"
ng-model="search.name"
ng-options="category.name for category in categories">
<option value="">Select Category</option>
</select>
Edit: Sorry I pointed out incorrect earlier.
Can you post "categories" and "imageList" array here?