//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()">×</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">×</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">×
</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">×</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数据但在我的情况下所有数据都被清除如何做这个功能。
答案 0 :(得分：0)
您需要创建数据的深层副本，然后点击重置重新分配。
angular.copy(source, [destination]);