Question

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

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

您使用users变量重复user;在调用selectedUser时引用（不存在的）editUser 它应该是：<a class="btn btn-link" ng-click="editUser(user)">Edit</a>

这是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＆gt; Bootstrap UI＆gt;在模态中编辑项目

2 个答案:

在您的JS代码中：

在您的HTML模板中：