Question

所以我有这个简单的系统用户列表（附带截图），客户端可以编辑用户或创建新用户，并相应地显示一个新的面板。

enter image description here

我正在做的是根据用户操作更新编辑/创建表单的不同字段。但是由于我来自Backbone背景，我通常会这样做的方法是创建一个新视图，用一个参数初始化它，指示它是创建还是编辑模式，然后在点击取消/保存时销毁此视图更改/创建用户。但是现在我只是依靠角度事件绑定来更新相同的表单元素，这是以角度方式进行的正确方法吗？

$scope.prepare_form = function (user_id) {

    if (user_id) {
        // edit mode
        var user = filterFilter($scope.users, { id: user_id })[0];

        $scope.fdata_create.name = user.name;
        $scope.fdata_create.email = user.email;
        $scope.fdata_create.role_name = user.role_name;
        $scope.fdata_create.id = user.id;
    } else {
        // create mode
        $scope.fdata_create.name = '';
        $scope.fdata_create.email = '';
        $scope.fdata_create.role_name = '';
        $scope.fdata_create.id = '';
    }


    $scope.form_create_open = true;

}

Answer 1

你应该根据模特而不是形式来思考。您应该使用其同步方法创建Teammate模型，更新，创建，替换等。它更清晰，这里是此tutorial

的示例摘录

预订html表单。

<div ng-controller="BookController">  
    <div ng-style="{ backgroundImage: 'url(' + book.getImageUrl(100, 100) + ')' }"></div>
    Id: <span ng-bind="book.id"></span>
    <br/>
    Name:<input type="text" ng-model="book.name" />
    <br/>
    Author: <input type="text" ng-model="book.author" />
    <br/>
    Is Available: <span ng-bind="book.isAvailable() ? 'Yes' : 'No' "></span>
    <br/>
    <button ng-click="book.delete()">Delete</button>
    <br/>
    <button ng-click="book.update()">Update</button>
</div>

图书模型定义为工厂。

app.factory('Book', ['$http', function($http) {  
    function Book(bookData) {
        if (bookData) {
            this.setData(bookData):
        }
        // Some other initializations related to book
    };
    Book.prototype = {
        setData: function(bookData) {
            angular.extend(this, bookData);
        },
        load: function(id) {
            var scope = this;
            $http.get('ourserver/books/' + bookId).success(function(bookData) {
                scope.setData(bookData);
            });
        },
        delete: function() {
            $http.delete('ourserver/books/' + bookId);
        },
        update: function() {
            $http.put('ourserver/books/' + bookId, this);
        },
        getImageUrl: function(width, height) {
            return 'our/image/service/' + this.book.id + '/' + width + '/' + height;
        },
        isAvailable: function() {
            if (!this.book.stores || this.book.stores.length === 0) {
                return false;
            }
            return this.book.stores.some(function(store) {
                return store.quantity > 0;
            });
        }
    };
    return Book;
}]);

使用Book Model的书本控制器

app.controller('BookController', ['$scope', 'Book', function($scope, Book) {  
    $scope.book = new Book();
    $scope.book.load(1);
}]);

例如，如果要更新书名，则无需手动分配新名称，因为Book的名称实例绑定到ng-model属性。要更新它，只需要从Book Factory调用更新功能。

$scope.book = new Book();
if(book_id){

    $scope.book.load(book_id);
    $scope.submit_book = $scope.book.update // submit_book function need to be triggered after submit the form. Here it
 }
else{
    $scope.submit_book = $scope.book.create // submit_book function need to be triggered after submit the form. Here it will create the book
 }

Answer 2

我会重复使用相同的表单，但绑定到不同的模型：

 app.controller('ctrl', function($scope){
        $scope.addUser = function(){
                 $scope.add= true;
                 $scope.user = {};
         };
        $scope.editUser =function(user){
                  $scope.add=false;
                  $scope.user ={};
                  angular.copy($scope.user, user);
         };

         $scope.onOK = function(user){
                   ...
                   angular.copy(user, $scope.user);
         };
});

HTML：

<div ng-controller="ctrl">
  <form>
         <input type ="text" ng-model="user.name" />
         <input type="text" ng-model="user.role" />
         <button ng-click="onOK(user)"> ok </button>
   </form>
  </div>

分割组件的角度最佳实践

2 个答案: