繁体   English   中英

如何在AngularJs中应用重置过滤器?

[英]How to apply the reset filter in AngularJs?

 //here we crate the module for the CRUD application here var app= angular.module("myApp",[]); app.controller("myCont", function($scope,myService){ $scope.user =[]; $scope.one = []; //here we create the myService function for show the Dmmt array $scope.user = myService.show(); console.log($scope.user); //here we create the saveUser function for push the item into the list $scope.saveUser = function(){ var data = { eid:$scope.user.eid, email:$scope.user.email, city:$scope.user.city, salary:$scope.user.salary, date:$scope.user.date, } console.log(data); //here we create will pass the user data to the myService of the show2 $scope.user =myService.show2(data); //Here we clear the form data with the help of the id document.getElementById("clear").reset(); //Here we clear the form data without function // $scope.user.eid =""; // $scope.user.email =""; // $scope.user.city =""; // $scope.user.salary =""; // $scope.user.date ="";*/ } //Calling setParam function for the particular userDetails. $scope.setParam = function(index){ $scope.one = $scope.user[index]; console.log($scope.one); } //here we delete the deleteUser function for remove the item into the lsit $scope.deleteUser = function(index) { $scope.result3 =myService.show3(index); console.log($scope.result3); }//close contrller here $scope.clearFilter =function() { $scope.user= ""; } }); //Declare the services //her e we crete the myService function in which we declare the static that will be display in the //index.html page app.service("myService",function(){ var employee =[]; var message=""; //here we create the show function for declare dynamic array & display in the home page of the user this.show = function(){ employee = [ { eid:"Kapil sssssss", email:"harry@yahoo.com", salary:12000, city:"Indore", date:"2014-10-19", img:"./images/download.png" }, { eid:"pooooo", email:"harry@yahoo.com", salary:5000, city:"Us", date:"2014-10-28", img:"../images/user.jpg" }, { eid:"ddsa", email:"harry@yahoo.com", salary:120, city:"Bhopal", date:"2014-10-24", img:"./images/avtar.jpg" }, { eid:"dsaddaPotter", email:"harry@yahoo.com", salary:1000, city:"Agar-malwa", date:"2014-10-29", img:"./images/images.jpg" }, { eid:"sadadasdasdasdsadsads54454", email:"harry@yahoo.com", salary:25000, city:"Indore", date:"2014-10-10", img:"./images/WP_16 September 2015_qstore.jpg" }, { eid:"Gotm Potter", email:"harry@yahoo.com", salary:2000, city:"Playboy", date:"2014-10-03", img:"./images/download (1).png" }, { eid:"Harry a4644464654s Potter", email:"harry@yahoo.com", salary:35000, city:"Agar", date:"2014-10-19", img:"./images/download.png" }, { eid:"mMayank rawal", email:"harry@yahoo.com", salary:5000, city:"Ujjain", date:"2014-10-28", img:"../images/user.jpg" }, { eid:"Gotm Soni", email:"gotm@yahoo.com", salary:2000, city:"Dewas", date:"2014-10-24", img:"./images/avtar.jpg" }, { eid:"Deepsh thakur", email:"harry@yahoo.com", salary:12000, city:"Australia", date:"2014-10-29", img:"./images/images.jpg" }, { eid:"Peter Potter", email:"harry@yahoo.com", salary:5000, city:"Harmaini", date:"2014-10-10", img:"./images/WP_16 September 2015_qstore.jpg" }, { eid:"kapil Soni", email:"kapil@yahoo.com", salary:2000, city:"Playboy", date:"2014-10-03", img:"./images/download (1).png" } ] return employee; } //here we create the show2 function that will be received our data from the contoller //& the push into the array of the employee this.show2 = function(data){ employee.push(data); message="push ho gy"; return employee; } //here we create the show3 function that will be remove user from the list //& through the index of the list this.show3 = function(index){ employee.splice(index,1); } } ); 
 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <link rel="stylesheet" href="custom.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- include the angularjs files here--> <script src="angular.min.js"></script> <script src="jquery-1.12.4.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="bootstrap.min.js"></script> <script src="app/controller.js"></script> <script src="app/service.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> individual files as needed --> </head> <body ng-controller="myCont"> <div class="jumbotron"> <div class="container"> <button type="button" class="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#myModal">Add New User</button> <input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Bhopal'" data-ng-false-value=''/>Bhopal <br> <input type="checkbox" data-ng-model='ok.type2' data-ng-true-value="'Indore'" data-ng-false-value=''/> Indore<br> <input type="checkbox" data-ng-model='ok.type3' data-ng-true-value="'Ujjain'" data-ng-false-value=''/>Ujjain <br> <input type="checkbox" data-ng-model='ok.type4' data-ng-true-value="'London'" data-ng-false-value=''/>London<br> <select ng-model="search"> <option value="Bhopal">Bhopal</option> <option value="London">London</option> <option value="Australia">Australia</option> </select> <button class="btn btn-succes btn-md pull-right" id="clear-filter" ng-click="clearFilter()" type="button">Clear Filter</button> <a href="#"><i class="fa fa-heart" aria-hidden="true"></i> <div class="input-group"> <input type="text" class="form-control" ng-model="search" placeholder="Search"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> <div class="alert alert-info" ng-if="message"> Info<a href="#" class="close" ng-click="clear()">&times;</a>. </div> <table class="table table-hover"> <thead> <tr> <th>User</th> <th>EmployeenName</th> <th>Email</th> <th>Salary</th> <th>City</th> <th>Date</th> </tr> </thead> <tbody> <tr ng-repeat="x in filtered =(user | filter:search) | filter:ok.type1 | filter:ok.type2 | filter:ok.type3 | filter:ok.type4 | orderBy:'salary' " onclick="document.getElementById('id01').style.display='block'" ng-click ="setParam($index)"> <td style="max-height:61px;"><img src={{x.img}}></img></td> <td>{{x.eid}}</td> <td>{{x.email}} </td> <td>{{x.salary| currency}}</td> <td>{{x.city}}</td> <td>{{x.date | date:'dd/mm/yy'}}</td> <div style="float:right; margin-top:8px;"> Total Count after Filtered-{{filtered.length}}</p> </div> <td> <button type="button" class="btn btn-info" ng-click="isEditForm=true;">edit</button> </td> <td ng-show="isEditForm"> <lable>Name</label><input ng-model="x.eid"/><br> <lable>Email</label><input ng-model="x.email"/><br> <lable>salary</label><input ng-model="x.salary"/><br> <lable>city</label><input ng-model="x.city"/><br> <lable>date</label><input ng-model="x.date"/><br> <button ng-click="isEditForm=false;">SAVE HERE</button> </td> <td> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Delete</button> </td> </tr> </tbody> </table> </div> </div> <!-- Modal --> //here we will provide the id for clear data <form name="newUser" id="clear" class="user" class="form-horizontal"> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class ="UpperText" class="modal-title" >New User Registration</h4> </div> <div class="form-group"> <label class="control-label col-sm-2">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" name="eid" ng-model="user.eid" placeholder="Enter Name" ng-minlength ="3" ng-maxlength="5"> <span class="danger" ng-show="newUser.eid.$touched && newUser.eid.$pristine" class="help-block">Enter EId</span> <span class="danger" ng-show="newUser.eid.$error.minlength" class="help-block">Enter min 3 digits.</span> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Email</label> <div class="col-sm-10"> <input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Enter Email" required> <span class="danger" ng-show="newUser.email.$touched && newUser.email.$pristine" class="help-block">Enter Email</span> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" style="white-space: nowrap;">Select Country:</label> <div class="col-sm-10"> <select class="form-control countries" ng-model="user.city" id="countryId sel1"> <option value="">Select City</option> <option value="Indore">Indore</option> <option value="Bhopal">Bhopal</option> <option value="Ujjain">Ujjain</option> </select> </div> <!-- <div class="form-group"> <label class="control-label col-sm-2">City</label> <div class="col-sm-10"> <input type="text" class="form-control" name="city" ng-model="user.city" placeholder="Enter city"> <span class="danger" ng-show="newUser.city.$touched && newUser.city.$pristine" class="help-block"> <span>Enter City</span> </div> </div> --> <div class="form-group"> <label class="control-label col-sm-2">Salary</label> <div class="col-sm-10"> <input type="number" class="form-control" name="salary" ng-model="user.salary" placeholder="Enter salary"> <span class="danger" ng-show="newUser.salary.$touched && newUser.salary.$pristine" class="help-block">Enter Salary</span> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Date</label> <div class="col-sm-10"> <input type="date" class="form-control" name="date" ng-model="user.date" placeholder="Enter date"> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" class="btn btn-default" data-dismiss="modal" ng-click="saveUser()" ng-disabled="newUser.$invalid" > </div> </div> <div class="modal-footer"> </div> </div> </div> <!-- here model body is closed--> </div> <!-- here model content is clo sed--> </form> <!-- Declare another model is declare for edit Modal --> <!--Here we creat the delete user model for dlete the user --> <div class="modal fade" id="myModalDelete" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times; </button> <h4 class="modal-title">Are R Want to Delete </h4> </div> <div class="modal-body"> <strong style="color:blue;"> You re going to delete the {{one.eid}}</strong> </h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser($index)">Yes </button> <button type="button" class="btn btn-default" data-dismiss="modal">No</button> </div> </div> <!-- here model body is closed--> </div> <!-- here model content is closed--> </div> <div class="w3-container"> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-8 w3-animate-left" style="max-width:600px"> <div class="w3-center"><br> <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal">&times;</span> <img src="{{one.img}}" alt="Avatar" class="w3-circle w3-margin-top"> </div> <form class="w3-container" action="form.asp"> <div class="table-responsive"> <table class="table table-striped"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th>City</th> <th>Date</th> </tr> <tr> <td>{{one.eid}}</td> <td>{{one.email}}</td> <td>{{one.salary}}</td> <td>{{one.city}}</td> <td>{{one.date}}</td> <span class="btn btn-info"><a href="https://angularjs.org/" target="_self">Follow Here</a></span> </table> </div> </form> </div> </div> </div> </body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </html> 

我必须应用带有复选框的过滤器,在这种情况下,复选框过滤器正常工作并且列表已正确过滤,但是在此之后,我单击了“重置”按钮以重置所有JSON数据,但是在我的情况下,所有数据都被清除了如何执行此功能。

您需要创建数据的深层副本,然后在重设时重新分配它。

angular.copy(source, [destination]);

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM