Редактирование Функциональности в AngularJS

Я довольно новый для AngularJs, я делал операцию Crud в AngularJs, я принес все записи пользователя, имеющие параметры, как (View, Edit (Update), удалить)Редактирование Функциональности в AngularJS

Если пользователь Хочет обновить запись, затем он нажал на править, а затем показывает свою запись. Все поля обязательны для заполнения. если пользователи удаляют текст в текстовом поле. затем нажмите на кнопку отмены, она перенаправляет страницу mange users с пустым полем

Как и в моем плунтере, я хочу обновить одну запись, щелкнуть по кнопке «Правка», а затем в названии (текстовое поле) сделать ее пустой. Немедленно нажмите кнопку Отмена Затем выход будет пустой моей записи (имя поля)

Но я хочу, данные записи пользователя (имя поля), если пользователь сделать его пустым

Я обновил свой код здесь

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <h1>Hello Plunker!</h1> 
 
    <div class="container" style="padding-top:20px;"> 
 
     <div ng-app="userApp" data-ng-controller="userController" class="container"> 
 
      <div ng-show="error" class="alert alert-danger alert-dismissible" role="alert"> 
 
       <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
       <p>{{ error }}</p> 
 
      </div> 
 
    <div class="modal fade" id="userModel" tabindex="-1" role="dialog" aria-hidden="true"> 
 
       <div class="modal-dialog"> 
 
        <div class="modal-content"> 
 
         <div class="modal-header"> 
 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
 
          <h4 class="modal-title" id="myModalLabel" ng-hide="editMode">Add User</h4> 
 
          <h4 class="modal-title" id="myModalLabel" ng-show="editMode">Edit User</h4> 
 
         </div> 
 
         <div class="modal-body"> 
 
          <form class="form-horizontal" role="form" name="adduserform"> 
 
           <div class="form-group"> 
 
            <label for="title" class="col-sm-2 control-label">Name</label> 
 
            <div class="col-sm-10"> 
 
             <input type="text" data-ng-model="user.name" name="name" class="form-control" id="title" placeholder="Your Name" required title="Enter your name" /> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="title" class="col-sm-2 control-label">Address</label> 
 
            <div class="col-sm-10"> 
 
             <input type="text" data-ng-model="user.address" name="address" class="form-control" id="title" placeholder="Your Address" required title="Enter your address" /> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="title" class="col-sm-2 control-label">ContactNo</label> 
 
            <div class="col-sm-10"> 
 
             <input type="text" data-ng-model="user.contact" name="contact" class="form-control" id="title" placeholder="Your ContactNo" required title="Enter your contactno" /> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <div class="col-sm-offset-2 col-sm-10"> 
 
             <span data-ng-hide="editMode"> 
 
              <input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" /> 
 
            </span> 
 
             <span data-ng-show="editMode"> 
 
              <!-- <input type="submit" value="Update" ng-disabled="" data-ng-click="update()" class="btn btn-primary"/> --> 
 
              <input type="submit" disabled="disabled" value="update" class="btn btn-primary"/> 
 
             </span> 
 
             <input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" /> 
 
            </div> 
 
           </div> 
 
          </form> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <h1>Users List</h1> 
 
      <table class="table table-hover"> 
 
       <tr> 
 
        <th>User ID</th> 
 
        <td>Name</td> 
 
        <th>Address</th> 
 
        <th>Contact No</th> 
 
        <th></th> 
 
       </tr> 
 

 
       <tr data-ng-repeat="user in users"> 
 
        <td><strong>{{ user.id }}</strong></td> 
 
        <td> 
 
         <p>{{ user.name }}</p> 
 

 
        </td> 
 
        <td> 
 
         <p>{{ user.address }}</p> 
 

 
        </td> 
 
        <td> 
 
         <p>{{ user.contact }}</p> 
 

 
        </td> 
 
        <td> 
 
         <p> 
 
          <a data-ng-click="get(user)" href="javascript:;">View</a> | 
 
          <a data-ng-click="edit(user)" href="javascript:;">Edit</a> | 
 
          <a data-ng-click="showconfirm(user)" href="javascript:;">Delete</a> 
 
         </p> 
 

 
        </td> 
 
       </tr> 
 
      </table> 
 
      <hr /> 
 

 
      <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-hidden="true"> 
 
       <div class="modal-dialog"> 
 
        <div class="modal-content"> 
 
         <div class="modal-header"> 
 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
 
          <h4 class="modal-title" id="myModalLabel">View User</h4> 
 
         </div> 
 
         <div class="modal-body"> 
 
          <form class="form-horizontal" role="form" name="viewuser"> 
 
           <div class="form-group"> 
 
            <label for="Name" class="col-sm-2 control-label">Name</label> 
 
            <div class="col-sm-10"> 
 
             {{user.name}} 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="Address" class="col-sm-2 control-label">Address</label> 
 
            <div class="col-sm-10"> 
 
             {{user.address}} 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="ContactNo" class="col-sm-2 control-label">ContactNo</label> 
 
            <div class="col-sm-10"> 
 
             {{user.contact}} 
 
            </div> 
 
           </div> 
 
          </form> 
 
         </div> 
 
         <div class="modal-footer"> 
 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true"> 
 
       <div class="modal-dialog"> 
 
        <div class="modal-content"> 
 
         <div class="modal-header"> 
 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
 
          <h4 class="modal-title" id="myModalLabel">Confirm Action</h4> 
 
         </div> 
 
         <div class="modal-body"> 
 
          Are you sure to delete? 
 
         </div> 
 
         <div class="modal-footer"> 
 
          <button type="button" class="btn btn-default" data-ng-click="delete()">Ok</button> 
 
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

пожалуйста, помогите мне с этой ситуацией

источник

2015-08-04 kishan kurivella

Я думаю, что это хороший вопрос , но для привлечения нужных людей: улучшите свой английский (например, начните свои предложения с большой буквы), не думайте, что все знают _Plunker_, если возможно, вставьте наиболее подходящий фрагмент кода здесь (предназначенный и разделенный, поэтому он выглядит как код) и т. д. –

Вы привязываете свой модальный исходный объект пользователя.

Вместо этого вы можете сделать временную копию пользователя, и если вы нажмете кнопку отмены, скопируйте темп обратно к исходному пользователю:

$scope.edit = function() { 

    $scope.user = this.user; 
    $scope.tempUser = angular.copy($scope.user); //copy user to temp 
    $scope.editMode = true; 
    $('#userModel').modal('show'); 
}; 

$scope.cancel = function() { 
    angular.copy($scope.tempUser, $scope.user); // copy back from temp to user 
    $('#userModel').modal('hide'); 
}

Смотрите эту plunker

источник

2015-08-04 14:05:12 eladcon

@ user3906922..Это точно то, что я ищу .. Большое спасибо. –

Редактирование Функциональности в AngularJS

ответ

Смежные вопросы