0
우리는 사용자가 제출 버튼을 클릭 한 후 양식의 데이터를 지워야합니다. i는 양식을 지우는 데 제공되지만 양식은 재설정되지 않습니다 .i javaScript reset() 함수를 사용하여 이것을 해결하기위한 data.how.AngularJS에서 "null of"속성을 읽을 수 없습니다.
//here we crate the module for the CRUD application here
var app= angular.module("myApp",[]);
app.controller("myCont", function($scope,myService){
\t //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
\t \t $scope.saveUser = function(){
\t \t \t var data =
\t \t \t \t \t {
\t \t \t \t \t \t eid:$scope.user.eid,
\t \t \t \t \t \t email:$scope.user.email,
\t \t \t \t \t \t city:$scope.user.city,
\t \t \t \t \t \t salary:$scope.user.salary,
\t \t \t \t \t \t date:$scope.user.date,
\t \t \t \t \t } \t
\t \t \t //here we create will pass the user data to the myService of the show2
\t \t \t $scope.user =myService.show2(data);
\t \t \t //Here we clear the form data
\t \t \t document.getElementById("clearData").reset();
\t \t \t
\t \t \t //Here we clear the form data without function
\t \t \t \t // $scope.user.eid ="";
\t \t \t \t // $scope.user.email ="";
\t \t \t \t // $scope.user.city ="";
\t \t \t \t // $scope.user.salary ="";
\t \t \t \t // $scope.user.date ="";*/
\t \t \t \t \t }
\t \t \t \t \t \t
\t \t //Calling setParam function for the particular userDetails.
\t \t
\t $scope.setParam = function(index){
\t \t $scope.one = $scope.user[index];
\t \t console.log($scope.one);
\t }
\t \t //here we delete the deleteUser function for remove the item into the lsit
\t \t $scope.deleteUser = function(index){
\t \t \t \t $scope.result3 =myService.show3(index);
\t \t \t \t console.log($scope.result3);
\t \t \t }//close contrller here
\t \t \t $scope.editeUser = function(x){
\t \t \t \t $scope.ok= myService.editeUsers(x);
\t \t \t }
});<!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="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>
<!-- Include all compiled plugins (below), or include 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.type1' data-ng-true-value="'Australia'" data-ng-false-value=''/> Australia<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Playboy'" data-ng-false-value=''/>Playboy
<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'London'" data-ng-false-value=''/>London<br>
<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="w3-table w3-bordered">
<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 | 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;"><p class="bg-primary">
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="#myModalDelete">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
\t //here we will provide the id for clear data
<form id="clearData">
<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="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">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" ng-model="user.email" placeholder="Enter Email">
</div>
</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">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Salary</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="salary" ng-model="user.salary" placeholder="Enter salary">
</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">
<button type="submit" class="btn btn-default" data-dismiss="modal"
ng-click="saveUser()" >Submit</button>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</form>
</div> <!-- here model body is closed-->
</div> <!-- here model content is clo sed-->
</div>
</div>
<!-- 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>
<style type="text/css"></style>
<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>
</div>
</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">
<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>
</form>
</div>
</div>
</div>
</body>
</form>
<!-- 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>
</body>
</html>
ngmodel을 이용하고 js의 dom 요소에 직접 액세스하지 말고 –
두 개의 최종 본문 태그, 닫히지 않은 tr 태그를 제출 한 후 모델 객체를 null/blank로 재설정해야합니다. 먼저 기초를 배우고 각도로 점프합니다. – Dale