Question

我有我的代码，当你点击＆＃34;添加用户＆＃34;按钮弹出窗口显示在屏幕上，然后我可以在输入字段中键入数据。点击＆＃34; Save＆＃34;按钮数据显示在页面上（表格内）。我还有一个＆＃34;编辑＆＃34;允许我编辑这些字段的按钮。我的问题是......如何启用“编辑”按钮，这样当我点击它时，我会回到弹出窗口并从那里进行编辑？这意味着当我点击“编辑”按钮时，我应该获得弹出窗口，其中包含我之前输入的数据。请有人帮助我。非常感谢。

这是我的代码：

var App = angular.module('App', ['ui.bootstrap'])

App.controller('mainController', function ($scope, $modal, $log, $filter) {

    $scope.People = [];

    $scope.openPopupScreen = function () {

        var modalInstance = $modal.open({
            template: '<div class="modal-header">   <a class="close" data-dismiss="modal" ng-click="cancel()"><i class="fa fa-times-circle-o" style="margin:10px;color:black;font-size:35px;"></i></a><h1>.</h1></div><div class="modal-body"><form >' +
                ' <label class="col-sm-3 control-label no-padding-right ng-binding">NAME:</label><input style = "width:200px;"type="text" class="form-control ng-scope ng-pristine ng-valid" ng-model="person.name"></br>' +
                ' <label class="col-sm-3 control-label no-padding-right ng-binding">LASTNAME:</label><input style = "width:200px;" type="text" class="form-control ng-scope ng-pristine ng-valid" ng-model="person.Lastname"></br>' +
                ' <label class="col-sm-3 control-label no-padding-right ng-binding">AGE:</label><input style = "width:200px;" type="number"class="form-control ng-scope ng-pristine ng-valid" ng-model="person.age"></br>' +
                ' <button id = "myid" type="button" class="btn btn-success" ng-click="add()"><i class="ace-icon fa fa-check"></i>Save</button>' +
                '  <button type="reset" class="btn ">Clear</button>' +
                ' </form>' +
                '</div>' +
                '<div class="modal-footer">' +
                '  <a data-dismiss="modal" aria-hidden="true" class="btn btn-primary" ng-click="cancel()">close</a>' +
                '</div>',
            controller: ModalInstanceCtrl
        });
        modalInstance.result.then(function (newPerson) {
            $scope.People.push(newPerson);
        });
    };

    var ModalInstanceCtrl = function ($scope, $modalInstance) {
        $scope.person = {
            name: '',
            Lastname: '',
            age: ''
        };


        $scope.ok = function () {
            $modalInstance.close($scope.selected.item);
        };

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

        $scope.add = function () {
            $modalInstance.close($scope.person);
        };
    };

});

Answer 1

我修改了你的小提琴。现在就像你说的那样工作

http://codepen.io/anon/pen/XmGYaE?editors=001

$scope.editPerson = function(person){
console.log("pr", person);
var modalInstance = $modal.open({
  template: modalTemplate ,
  controller: ModalInstanceCtrl,
  resolve: {
    person: function () {
      return person;
    } 
  }
});

Answer 2

我修改了你的（@Zohaib Ijaz）codepen。我没有使用editperson函数，我只是在openPopupScreen中传递person值并通过resolve发送people值。因此我们可以为这两种情况重用openPopupScreen函数。我认为重用一个函数会更好。

$scope.openPopupScreen = function(people) {

 var modalInstance = $modal.open({
  template: modalTemplate ,
  controller: ModalInstanceCtrl,
  resolve: {
    person: function(){
      return people;
    }
  }
 });
};

如何使用Angularjs编辑输入字段？

2 个答案: