Hello I have a small project in which I want to have perform search from multiple dynamically added text fields.
This is how I add the search fields:
<div class="form-group" ng-repeat="choice in choices">
<button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another choice</button>
<input type="text" ng-model="choice.name" name="" placeholder="Search criteria">
</div>
And later I have a table with ng-repeat and here is that part:
<tr ng-repeat="todo in todos | filter: {filter from all fields}">
.......
</tr>
What I want to do is to have the contents filtered with all dynamically added search fields.
You'll have to create your own filter to handle that. I've gone ahead and gotten you started.
$scope.myFilter = function(input){
for(var key in input){
for(var x = 0; x < $scope.choices.length; x++){
if(input[key] == $scope.choices[x].name){
return true;
}
}
}
return false;
}
Here is the jsFiddle of the output: http://jsfiddle.net/wsPrv/
Rather than using the filter, do the filtering in the controller yourself. Here is the updated fiddle with the solution. In the first textbox, replace choice1 with "some" and you will see the todo with text "Some stuff" being displayed.
See the relevant part below. For details, see the fiddle.
$scope.$watch('choices', function(newValue) {
$scope.DisplayedTodos = [];
// Filter items here and push to DisplayedTodos. Use DisplayedTodos to display todos
}, true);
Related
I have a UI similar to excel, where the user can change the data in which ever row he wants.
Currently i am using ng-repeat to display the existing data, after fetching from mongoDB. This data is an array of Json Objects , so ng-repeat works fine.
Now i want to have a single save button, clicking which, all the edits should be saved. My question is how to maintain or know which rows have been changed ?? i can just send the whole array and update in the db, but when the number of rows is large and data of just one row has changed there will be an unnecessary overhead. so let me know how this can be optimised.
Thanks in advance
Add an ng-change event to fields where they can edit the values.
On ng-change, set a new key 'modified: true' on 'obj in objects'.
Something like this:
<div ng-repeat="row in rows track by $index">
<input type="text" ng-change="markAsChanged($index)" ng-model="row.textValue">
</div>
And your JS:
$scope.markAsChanged = function(index) {
$scope.rows[index].changed = true;
}
Then your update function could iterate all rows and send changed rows to the webservice for updating instead of sending them all.
$scope.rowsChanged = [];
$scope.Changed = function(row) {
$scope.rowsChanged.push(row);
}
<div ng-repeat="row in rows track by $index">
<input type="text" ng-change="Changed(row)" ng-model="row.textValue">
</div>
Hope it helps..
This thing can be achieved by maintaining an array which contain index for all the rows that has changed. On clicking on save button , an iteration will be required on this array (For rows which have changed).
A new $index can be pushed to this array anytime when the user is just clicking on a row or on changing any input in the array.
HTML:
<div ng-repeat="row in rows track by $index">
<input type="text" ng-change="markAsChanged($index)" ng-model="row.textValue">
</div>
Controller:
var listOfChangedRows = [];
$scope.markAsChanged = function(index){
if(listOfChangedRows.indexOf(index)==-1)
{
listOfChangedRows.push(index);
}
}
//Save button Clicked
$scope.saveEditedRows = function(){
var updatedItems = [];
for(var i=0;i<listOfChangedRows.length;i++)
{
updatedItems.push($scope.rows[i]);
}
//Now send the updatedItems array to web service
}
I'm new in angularjs and razor. so please help me. I have such code
<div ng-app="">
<p>Input page number to filter: <input type="text" ng-model="pageNumber"></p>
<div class="table-bordered">
#{
string pageNo = "0";
}
#foreach (var item in Model.sol)
{
if (pageNo != item.TaskPageNo.ToString())
{
pageNo = item.TaskPageNo.ToString();
<div id="PAGENUMBER" class="text-success" ng-show="**CONDITION**"><abbr title="select something">Page - #pageNo</abbr></div>
}
var pt = pat + item.Task_ID;
#item.TaskNo
}
</div>
</div>
I don't know how to set the CONDITION value using AngularJS...
I want to type into 'PageNumber' input box some value and filter pages, so the condition must be something like this
if (PAGENUMBER.value.indexOf(pageNumber.value)>-1) { show this page
number } else { hide it }
The ID PAGENUMBER is only used here in question not in real code
How can I do this ? pleease help :)
You need to get your data using angular and then use ng-repeat over that data. Then you can add a filter on the ng-repeat based of your input ng-repeat="item in items | filter: {pageNumber: pageNumber}":
if you set PAGENUMBER like #pageNo
for your checking you can use simple condition like
<div id="#pageNo" class="text-success" ng-show="'#pageNo'.indexOf(pageNumber) > -1"><abbr title="select something">Page - #pageNo</abbr></div>
Hi I have following form in which I have two input boxes and a ng-repeat that displays the results. Basically in my controller it fetches data from db and is loaded in the nt-repeat.
<td>
<div>
<input type="text" ng-model="item.logo">
</div> </td>
<td>
<div>
<input type="text" ng-model="item.name" >
</div>
</td>
<tr ng-repeat="aa in addlaborrates | filter:{name:item.name} ">
<td>{{aa.name}}</td>
<td>{{aa.lago}}</td>
<td>{{aa.id}}</td>
</tr>
When i type in the item.name input box filter finds the matching items in the ng-repeat.
What i am trying to do is when I type in name input box as it filters I want the logo fields also be auto populated with corresponding value. Please let me know how to achieve this.
Thanks
You can create a filter like in http://jsfiddle.net/V9bgn/1/
.filter('getLogo', function() {
return function(array, value) {
var ret = [];
angular.forEach(array, function(item) {
if (item.name.indexOf(value) > -1) {
ret.push(item.logo);
}
});
return ret[0] || '';
};
});
And then use it in the controller:
$scope.$watch('item.name', function(val) {
$scope.item.logo = $filter('getLogo')($scope.addlaborrates,val);
});
hi everyone i have a problem in javascript i can print array if fix them in html but whn i try to print them on clic they are not working just print the array names
if i print seriesre simple it print values that is fine but when i check any checkbox and want to print one or tow of them it just showing array name not values
thanks for help
check this example
$(document).ready(function() {
Comment = [['2011-01-29',7695],['2011-02-02',19805]];
WallPost = [['2011-01-29',11115],['2011-02-02',8680]];
Likes = [['2011-01-29',5405],['2011-02-02',10930]];
var seriesre= [Comment,WallPost,Likes];
var mygraphs = new Array();
alert(seriesre);
$("#testCheck").click(function() {
i=0;
$("#testCheck :checked").each(function() {
mygraphs[i]= $(this).val();
i++;
});
newseriesre = "["+mygraphs+"]";
alert(newseriesre);
});
});
<div class="activity">
<form method="POST" id="testCheck" name="myform">
Likes
<input type="checkbox" value="Likes" name="box2">
Comments
<input type="checkbox" value="Comment" name="box3">
Wall Post
<input type="checkbox" value="WallPost" name="box4">
</form>
</div>
You can use
alert(myarray.join())
to alert your array's values
You should use a associative array instead of an array, so that you can look up the data based on the name as a string instead of trying to find the variable. All objects in Javascript are associative arrays, so just put the data in an object.
Also:
Create the mygraphs array inside the event handler, otherwise it can not shrink when you uncheck options.
Catch the click on the checkboxes inside the form, not on the form itself.
Put a label tag around the checkbox and it's label, that way the label is also clickable.
You don't need an index variable to put values in the mygraphs array, just use the push method to add items to it.
http://jsfiddle.net/cCukJ/
Javascript:
$(function() {
Comment = [['2011-01-29',7695],['2011-02-02',19805]];
WallPost = [['2011-01-29',11115],['2011-02-02',8680]];
Likes = [['2011-01-29',5405],['2011-02-02',10930]];
var seriesre = {
'Comment': Comment,
'WallPost': WallPost,
'Likes': Likes
};
$("#testCheck :checkbox").click(function() {
var mygraphs = [];
$("#testCheck :checked").each(function() {
mygraphs.push(seriesre[$(this).val()]);
});
alert("["+mygraphs+"]");
});
});
HTML:
<div class="activity">
<form method="POST" id="testCheck" name="myform">
<label>
Likes
<input type="checkbox" value="Likes" name="box2">
</label>
<label>
Comments
<input type="checkbox" value="Comment" name="box3">
</label>
<label>
Wall Post
<input type="checkbox" value="WallPost" name="box4">
</label>
</form>
</div>
I understand that you want to alert the selected values when clicking anywhere on the form? If that's true correct code with minimal changes to your existing code will be:
var mygraphs = [];
$("#testCheck").click(function() {
$("#testCheck :checked").each(function() {
mygraphs.push($(this).val());
});
alert("Selected values are: " + mygraphs.join(", "));
});
You can try this.
alert($("#testCheck :checked")
.map( function(i, field) { return field.value}
).get());
Check your working example in http://jsfiddle.net/dharnishr/d37Gn/
I am creating a project in AngularJs. I have problem while filtering data. Data is coming from API in the form of 0 and 1. I am showing the data in conditional form like:
ng-if = 0 ; Internal
ng-if = 1; External
My problem is that the data is filtered when I type 0 and 1 in search box, but I want data should be filtered when I type internal and external in search box.
Here is my code:
<input type="search" ng-model="customersFlowsList.linkStatus" class="flow_filter_searchbox">
<li ng-repeat="customersFlowsList in customersFlows | filter:{linkStatus:customersFlowsList.linkStatus} | unique:'linkStatus'">
<div class="check_box">
<input type="checkbox" id="checkbox1" name="checkbox2" ng-model="filterLink[customersFlowsList.linkStatus]">
<label for="checkbox1"><span for="checkbox1">{{customersFlowsList.linkStatus | contractStatusName}}</span></label>
</div>
</li>
You can write a simple custom filter function to do this. Some sample code might look like this:
$scope.filterFn = function(item){
if($scope.search.Mode == "external"){
return item.Mode == 1
}
else if ($scope.search.Mode == "internal"){
return item.Mode == 0;
}
else return false;
};
Then replace your filter in your ng-repeat with the new filter function
ng-repeat="item in items | filter: filterFn"
Also, another option could be to replace the property on the data when you receive it from 0 and 1 to internal or external, then your original search would work.