I am implementing a search input box that should search based off of a certain property of the objects that are getting iterated over and I would like them to be selected using a radio button.
For example here is my code:
<span style="margin-bottom: 10px; display: inline-block;">Search: <input ng-model="searchText.CustomerName" /> </span>
<table id="Table1" class="alertTable">
<thead>
<tr>
<th class="xsmCol"><img src="/App_Themes/SkyKick/images/misc/clear.gif" class="iFlag" /></th>
<th>Subject</th>
<th>Customer</th>
<th>Type</th>
<th>Date</th>
<th class="smCol">Actions</th>
</tr>
</thead>
<tbody id="tbAlerts">
<tr ng-repeat-start="alert in alerts | filter:searchText" > <!-- | filter:searchText -->
<td><img src="/App_Themes/SkyKick/images/misc/clear.gif" data-tooltip="{{ alert.tooltip }}" class="{{ 'iAlert' + alert.AlertType }}"/></td>
<td>{{ alert.Summary }}</td>
<td>{{ alert.CustomerName }}</td>
<td>{{ alert.CreatedDate }}</td>
<td>{{ alert.Category }}</td>
<td>
<!-- Tricky little widget logic -->
</td>
</tr>
<tr ng-repeat-end class="alertDetail">
<td></td>
<td colspan="5" ng-bind-html="alert.Details"></td>
</tr>
</tbody>
</table>
As you can see, I am currently filtering based off of the CustomerName field in my array. However, I want to change the logic so that I can select between CustomerName, Subject, Type, and Date using a radio button. So if the user clicks the Date radio button, then the searchText will filter only based off the Date attribute. What is the best way to get this functionality?
Create a set of radio buttons which share the same ng-model value. Use that value to set the key on searchText:
<span style="margin-bottom: 10px; display: inline-block;">Search:
<input ng-model="searchText[selectedSearch]" ng-init="searchText = {};
selectedSearch='CustomerName'" />
</span>
<input type="radio" ng-model="selectedSearch" value="CustomerName" > Customer Name
<input type="radio" ng-model="selectedSearch" value="CreatedDate" > Created Date
<input type="radio" ng-model="selectedSearch" value="Category" > Category
Demo
angular.module('myApp', []).controller('candidateCtrl', function($scope) {
$scope.candidates = [
{name:'Goutam',role:'Engineer',country:'India'},
{name:'Carl',role:'Engineer',country:'Sweden'},
{name:'Margareth',role:'Doctor',country:'England'},
{name:'Hege',role:'Engineer',country:'Norway'},
{name:'Joe',role:'Engineer',country:'Denmark'},
{name:'Rathin',role:'Doctor',country:'India'},
{name:'Birgit',role:'Teacher',country:'Denmark'},
{name:'Mary',role:'Engineer',country:'England'},
{name:'Kai',role:'Teacher',country:'Norway'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row">
<div class="col-lg-4">
<p>Angular JS Filter by Radio Button</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
</label>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="candidate in candidates | filter:searchText:strict">
<td>{{candidate.name}}</td>
<td>{{candidate.role}}</td>
<td>{{candidate.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Related
here is my html code;
I want to fetch value of first checkbox which is already initialize and the by selecting another checkbox i can get value of first one
<div class="widget-body" style="display: block;">
<div class="widget-main">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>issued</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueitassets">
<tr>
<td>{{emp}}</td>
<td>
<input type="checkbox" value="{{emp}}" ng-model="checked" ng-init="checked=true" />
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JS CONTROLLER
I need to make a filter over a table in Angular js. I have this code, but I doesn't work. Here, I have 2 dropdowns: for eat_code and feeling_code and I would like to filter the rows after selecting each of them.
<div class="widgets">
<div class="row">
<div class="col-md-12">
<div class ="panel">
<div class="panel-heading">
<h3 class="panel-title">Select PID</h3>
</div>
<div class="panel-body">
<form class="row form-inline ng-pristine ng-valid ng-scope"
novalidate name="getBGsForm">
<div class="form-group col-sm-3 col-xs-6"
ng-class="{'has-error': getBGsForm.patientID.$invalid && (getBGsForm.patientID.$dirty || getBGsForm.$submitted)}">
<input type="text" class="form-control"
ng-model="patientID"
placeholder="PID"
required name="patientID">
<span class="help-block error-block basic-block"
ng-if="getBGsForm.patientID.$error.required">Patient ID is required.</span>
</div>
<button type="submit"
class="btn btn-primary"
ng-click="getBGs()">Show BGs</button>
</form>
</div>
</div>
<div ba-panel>
<div>
<div class="col-md-4">
<select class="form-control"
ng-model="search.eat_code"
ng-options="v.code as (v.code + ' - ' + v.label) for v in dropdownValuesTag">
<option value=""> --- filter by meal tag --- </option>
</select>
</div>
<div class="col-md-4">
<select class="form-control"
ng-model="search.feeling_code"
ng-options="v.code as (v.code + ' - ' + v.label) for v in dropdownValuesSource">
<option value=""> --- filter by source --- </option>
</select>
</div>
</div>
</div>
<div ba-panel>
<div class="horizontal-scroll">
<div class="form-group select-page-size-wrap ">
<label>Rows on page
<select class="form-control selectpicker show-tick"
title="Rows on page" selectpicker
ng-model="smartTablePageSizeBG"
ng-options="i for i in [5, 10, 15, 20, 25]">
</select>
</label>
</div>
</div>
<table class="table" st-table="displayedCollectionBG" st-safe-src="smartTableDataBG" st-set-filter = "myStrictFilter">
<thead>
<tr class="sortable ">
<th st-sort="id">Reading Id</th>
<th st-sort="value">Value</th>
<th st-sort="unit">Unit</th>
<th st-sort="timestamp">Timestamp</th>
<th st-sort="is_control">Is Control</th>
<th st-sort="source">Source</th>
<th st-sort="eat_code">Eat Code</th>
<th st-sort="feeling_code">Feeling Code</th>
<th st-sort="carb"> Carb</th>
<th st-sort="note"> Note</th>
<th st-sort="storedTimestamp">Stored Timestamp</th>
<th st-sort="adaTargetRangeStatus">adaTargetRangeStatus</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in displayedCollectionBG | filter: search">
<td class="table-id">{{item.id}}</td>
<td>{{item.value}}</td>
<td>mg/dl</td>
<td><span ng-bind="item.timestamp | date:'MM / dd / yyyy hh:mm:ss a'"></span></td>
<td>{{item.tags.is_control}}</td>
<td>{{item.tags.source}}</td>
<td>{{item.tags.eat_code}}</td>
<td>{{item.tags.feeling_code}}</td>
<td>{{item.tags.carb}}</td>
<td>{{item.tags.note}}</td>
<td><span ng-bind="item.storedTimestamp | date:'MM / dd / yyyy hh:mm:ss a'"></span></td>
<td>{{item.adaTargetRangeStatus}}</td>
<td>
<div class="buttons">
<a class="btn btn-primary editable-table-button btn-xs" ui-sref="BGs.form({id: {{item.id}}})" ui-sref-opts="{reload: true}">Edit</a>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" class="text-center">
<div st-pagination="" st-items-by-page="smartTablePageSizeBG" st-displayed-pages="5"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
What am I doing wrong? Thank you!
Try this : click here
From it, you have to select 'Ajax column filter support (NEW!)' and right side you will get demo, just click on every column's header, you will get column based filter.
I have created the simple login form and perform the validation on it but the problem is that validation is occur during the page load.My oode here.
<body ng-controller="myCont">
<form name="myForm" novalidate>
<h2 align="center">Add The Item Here</h2>
<table align="center" border="2">
<div class="control-group">
<div class="controls">
<tr>
<td>pid</td>
<td><input type="number" name="pid" ng-model="user.pid" ng-maxlength="3" required="pid" ></td>
<td ng-show="myForm.pid.$touched && myForm.pid.$invalid"></td>
<td ng-show="myForm.pid.$error.required" style="color:red">Enter Pid</td>
<td ng-show="myForm.pid.$error.maxlength" style="color:red">Only 3 digits for pid</td>
</tr>
<tr>
<td>pname</td>
<td><input type="text" name="pname" ng-model="user.pname" required="pname"></td>
<td style="color:red" ng-show="myForm.pname.$touched && myForm.pname.$invalid"></td>
<td ng-show="myForm.pname.$error.required" style="color:red">Pname is required.</td>
</tr>
<tr>
<td>pcost</td>
<td><input type="number" name="pcost" ng-model="user.pcost" required="pcost"></td>
<td style="color:red" ng-show="myForm.pcost.$touched && myForm.pcost.$invalid">
<td ng-show="myForm.pcost.$error.required" style="color:red">Pcost is required.</td>
</tr>
<div ng-repeat="x in result track by $index"></div>
<tr>
<td>AddData<input type="submit" ng-disabled="myForm.$invalid" ng-click="addAll()">
</td>
<td><input type="reset" name="reset" value="reset"></td>
</tr>
</div>
</div>
</table>
</form>
</body>
enter image description here
try angular-toastr for notification of wrong credentials or error message...
Hope it will help out
I'm using Firefox-42.0 and AngularJS v1.4.7.
HTML :
<div class="modal-body">
<p>Select user to share with from the list below.</p>
<div class="form-group">
<label for="">Search:</label>
<input type="text" class="form-control" ng-model="SharedSearchKey" ng-model-options="{ debounce: 600 }" />
</div>
<div class="modal-table" ng-show="usersToShare && usersToShare.length">
<table class="table table-striped table-responsive table-condensed">
<thead>
<tr>
<th>Name</th>
<th>User Name</th>
<th>View Only Tasks</th>
<th>Permission</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in usersToShare">
<td ng-bind="row.ContactName"></td>
<td ng-bind="row.UserName"></td>
<td>
<input type="checkbox" ng-model="row.TaskAssign" ng-init="row.TaskAssign=true" />
</td>
<td>
<select ng-model="row.permission" ng-init="row.permission='1'">
<option value="1">Readonly</option>
<option value="2">Write</option>
</select>
</td>
<td>
<input type="checkbox" ng-model="row.selected" ng-click="toggleSelectThisUser(row)" />
</td>
</tr>
</tbody>
</table>
</div>
JS in Controller :
$scope.toggleSelectThisUser = function (user) {
console.log(user);
};
When i change dropdown and click checkBox, it doesn't reflect in $scope. $scope contains the initial value. This problem occurs in Firefox. But it works fine in google chrome.
I have an AgularJS search using a filter, which works. I now want the filter to only show results that match the filter.
So, I want the initial data load to not show, if my typed in filter matches, then show the results.
Here is my code so far:
<div class="row">
<div class="large-12 columns">
<div ng-app>
<div ng-controller="CashTransController">
<input type="text" ng-model="search.$">
<br />
<div><strong>Filter Results</strong></div>
<br />
<div class="row"></div>
<br/>
<table border="0" class="items">
<thead>
<tr>
<th>Purchaser</th>
<th>Redemption Code</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | filter:search">
<td>{{item.firstname}} {{item.lastname}}</td>
<td valign="top"><h3>{{item.redemption_code}}</h3></td>
<td><h3>{{item.creation_date}}</h3></td>
</tr>
</tbody>
</table>
<br />
</div>
</div>
</div>
</div>
You could simply add a ng-show to the table items.
I don't know why you called your search model search.$ and not just search.
Try this code. It will only show the results if you typed something into the input:
<div class="row">
<div class="large-12 columns">
<input type="text" ng-model="search">
<br/>
<div><strong>Filter Results</strong></div>
<br/>
<div class="row">
<p>{{search}}</p>
</div>
<br/>
<table border="0" class="items">
<thead>
<tr>
<th>Purchaser</th>
<th>Redemption Code</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-show="search" ng-repeat="item in items | filter:search">
<td>{{item.firstname}} {{item.lastname}}</td>
<td valign="top"><h3>{{item.redemption_code}}</h3></td>
<td><h3>{{item.creation_date}}</h3></td>
</tr>
</tbody>
</table>
<br/>
</div>
</div>