在AngularJS中获取对象数组答案

【问题标题】：Get array of object in AngularJS在AngularJS中获取对象数组
【发布时间】：2017-03-25 15:25:04
【问题描述】：

我正在使用指令在单击按钮时动态添加 HTML div。

如何将模型绑定到控制器范围对象？
如何在动态添加的 div 中使用输入数据填充范围对象？
如何在点击保存按钮时获取对象列表。

请找到我尝试动态添加html div，但不知道如何将输入的数据绑定到范围对象的代码。

  <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
        <script type="text/javascript">

        function FlatMember() {
            this.firstName  =  '';
            this.lastName  =  '';
            this.emailId  =  '';
            this.panNo  =  '';
            this.phoneNo  =  '';
            this.profileImage  =  ''
        }

        angular.module('myApp', []);

        angular.module('myApp').controller('FlatMemberController', function ($scope) {
            $scope.flatMembers = [];

            $scope.addFlatMember = function() {
                $scope.flatMembers.push(new FlatMember());
            };

            $scope.SaveFlatMember = function(){
                console.log($scope.flatMembers);
            }
        });

        angular.module('myApp').directive('memberInformation', function(){
            return {
                restrict: 'A',
                template: '<div style="margin-top: 50px;">\
                            <div>\
                                <p>\
                                    <label>First Name </label>\
                                    <input type="text" id="firstName" /> \
                                    <label>Last Name </label> <input type="text" id="lastName" />\
                                </p>\
                                <p>\
                                    <label>Email </label> <input type="email" id="emailId"/>\
                                </p>\
                                <p>\
                                    <label>PAN Number </label> <input type="text" id="panNo" data-ng-minlength="10"/>\
                                </p>\
                                <p>\
                                    <label>Mobile </label> <input type="text" data-ng-minlength="10" id="phoneNo" />\
                                </p>\
                            </div> </div>',
                replace: true,
                transclude: false,
                scope: {
                    memberInfo: '=memberInformation'
                }
            };
        });
        </script>
    </head>
    <body ng-app="myApp">
        <div ng-controller="FlatMemberController">
            <button ng-click="addFlatMember()">Add new Member</button>
            <div ng-repeat="flatMember in flatMembers"member-information="flatMember"></div>
            <button ng-click="SaveFlatMember()">Save Member</button>
        </div>
    </body>
</html>

【问题讨论】：

标签： html angularjs

【解决方案1】：

您的模板缺少ng-model 绑定：

angular.module('myApp').directive('memberInformation', function(){
            return {
                restrict: 'A',
                template: '<div style="margin-top: 50px;">\
                            <div>\
                                <p>\
                                    <label>First Name </label>\
                                    <input type="text" id="firstName" name="firstName" ng-model="memberInfo.firstName" /> \
                                    <label>Last Name </label> <input type="text" id="lastName" name="lastName" ng-model="memberInfo.lastName" />\
                                </p>\
                                <p>\
                                    <label>Email </label> <input type="email" id="emailId" name="emailId" ng-model="memberInfo.emailId" />\
                                </p>\
                                <p>\
                                    <label>PAN Number </label> <input type="text" id="panNo" data-ng-minlength="10" name="panNo" ng-model="memberInfo.panNo" />\
                                </p>\
                                <p>\
                                    <label>Mobile </label> <input type="text" data-ng-minlength="10" id="phoneNo" name="phoneNo" ng-model="memberInfo.phoneNo" />\
                                </p>\
                            </div> </div>',
                replace: true,
                transclude: false,
                scope: {
                    memberInfo: '=memberInformation'
                }
            };
        });

【讨论】：

谢谢@fedeisas。如果我点击了保存按钮，如何获取对象列表？
打开你的控制台。你已经在做console.log 的$scope.flatMembers 对象。我不确定我是否理解您的问题。