AngularJS > Bootstrap UI > 在模式中编辑项目

Question

我正在从事一个项目，该项目可以在模态 window 中添加和编辑项目。添加部分工作正常。编辑部分正在打开模态，但我的 ng-model 没有反映，模态中的输入字段为空白 window.

这里有一个 plunker 来说明这个问题： http://plnkr.co/edit/8mHOo0YE4qv0UcDvCCgS?p=preview

AngularJS代码：

// Code goes here
var userPopup = angular.module('userPopup', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
userPopup.controller('popupController', function($scope, $uibModal, $log) {
$scope.users = [{
    name: 'Steve',
    job: 'Accounting',
    age: '39',
    sal: '36000',
    addr: '123 Streetly Unit 2, Chicago, IL 60601'
 }];

$scope.editUser = function(user) {
    var dialogInst = $uibModal.open({
      templateUrl: 'edit.html',
      controller: 'editDialogInstCtrl',
      size: 'lg',
      resolve: {
        selectedUser: function() {
          return $scope.user;
        }
      }
    });

  };

  $scope.addUser = function() {
    var dialogInst = $uibModal.open({
      templateUrl: 'popup.html',
      controller: 'DialogInstCtrl',
      size: 'lg',
      resolve: {
        selectedUser: function() {
          return $scope.user;
        }
      }
    });

    dialogInst.result.then(function(newuser) {
      $scope.users.push(newuser);
      $scope.user = {
        name: '',
        job: '',
        age: '',
        sal: '',
        addr: ''
      };
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

userPopup.controller('DialogInstCtrl', function($scope, $uibModalInstance, selectedUser, $log) {
  //Assign Selected User
  $scope.user = selectedUser;

  $scope.submitUser = function() {
    $uibModalInstance.close($scope.user);
  };

  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});

userPopup.controller('editDialogInstCtrl', function($scope, $uibModalInstance, selectedUser, $log) {
  //Assign Selected User
  $scope.user = selectedUser;

  $scope.save = function() {
    $uibModalInstance.close($scope.user);
  };

  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});

HTML代码：

<a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a>

我知道它很接近，但我忽略了一些东西。请指教

谢谢

Answer 1

您有两个个问题，真的只是拼写错误。

在你的 JS 代码中：

//                  passing `user` here
//                          v
$scope.editUser = function(user) {
  var dialogInst = $uibModal.open({
    /* ... */
    resolve: {
      selectedUser: function() {
        return $scope.user;
      } //          ^
    }   // using $scope.user there
  });
};

您正在向 editUser 函数传递一个参数，但实际上并没有使用它；而是指 $scope.user，即 undefined.
应该是：selectedUser: function() { return user; }

在您的 HTML 模板中：

<!-- declaring `user` here -->
<tr ng-repeat="user in users">
    <td>{{user.name}}</td>
    <td>{{user.job}}</td>
    <td>{{user.age}}</td>
    <td>{{user.sal | currency}}</td>
    <td>{{user.addr}}</td>
                                       <!-- using `selectedUser` there -->
    <td><a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a></td>
</tr>

您正在使用 user 变量迭代 users；然后在调用 editUser.
时引用（不存在的）selectedUser 应该是：<a class="btn btn-link" ng-click="editUser(user)">Edit</a>

这是 link 到 a (working) fork of your plunk。

Answer 2

您需要在您的视图中更改此代码。替换此代码

<td><a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a></td>

到

<td><a class="btn btn-link" ng-click="editUser(user)">Edit</a></td>

并在您的控制器中调用模态..更改

$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
  templateUrl: 'edit.html',
  controller: 'editDialogInstCtrl',
  size: 'lg',
  resolve: {
    selectedUser: function() {
      return $scope.user;
    }
  }
});
};

到

$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
  templateUrl: 'edit.html',
  controller: 'editDialogInstCtrl',
  size: 'lg',
  resolve: {
    selectedUser: function() {
      return user;
    }
  }
});
};

AngularJS > Bootstrap UI > 在模式中编辑项目

AngularJS > Bootstrap UI > Editing Item in Modal

angularjs

angular-ui-bootstrap

bootstrap-modal

在你的 JS 代码中：

在您的 HTML 模板中：