Get array of object in AngularJS

Question

I am using directive to add HTML div dynamically on the click of button.

How can I bind the model to controller scope object?
How can populate the scope object with enter data in dynamically added div?
How can I get list of object while click on save button.

Please find the code that I tried to add html div dynamically, but doesn't have any idea how to bind the entered data to scope object.

  <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>

fedeisas · Accepted Answer · 2017-03-25 07:25:04Z

0

Your template is missing the ng-model bindings:

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

answered Mar 25, 2017 at 7:25

fedeisas

2,0232 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anil Kumar Over a year ago

Thanks @fedeisas. If I have clicked Save button, how can get the list of object?

fedeisas Over a year ago

Open your console. You are already doing console.log of your $scope.flatMembers object. I'm not sure I understand your question.

Collectives™ on Stack Overflow

Get array of object in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related