AngularJS > 引导程序 UI >模式中的编辑项

Question

我正在研究一个项目，该项目在模态窗口中添加和编辑项目是有意义的。添加部分工作正常。编辑部分正在打开模式，但我的NG模型没有反映，输入字段在模态窗口中为空白。

这是一个说明问题的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>

---

这是指向您的plunk的(工作(叉的链接。

Answer 2

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

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

to

<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;
    }
  }
});
};

to

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