1
votes

I have a problem pushing items inside the array of a modal. I'm getting undefine value.

I followed all the examples that i can find but it is not working when it's done on model.

Here is the plunk http://plnkr.co/edit/xMiwyw?p=preview

My Code:

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

    myApp.controller('ordersCtrl', 
        function ordersCtrl($scope, $modal){

            $scope.open = function () {

                var modalInstance = $modal.open({
                  templateUrl: 'myModalContent.html',
                  controller: ModalInstanceCtrl,
                  resolve: {
                    items: function () {
                      return $scope.items;
                    }
                  }
                });

             };

    });

var ModalInstanceCtrl = function ($scope, $modalInstance, $http) {

    $scope.dealerCount = [];

    // Add a Item to the list
    $scope.addItem = function () {
        $scope.dealerName = dealerName;

        $scope.dealerCount.push({
            name: $scope.dealerName
        });

        // Clear input fields after push
        $scope.dealerName = "";

    };

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

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

Modal Template:

<div class="row" id="AddItem">
   <div class="col-md-6"><p class="input-group">
    <input value="" type="text" placeholder="Name of Item" ng-model="dealerName"><button ng-click="addItem()">Add to list</button></p>
   </div>
</div>
<div class="row">
   <tr ng-repeat="item in dealerCount" class="item-unchecked">
   <td><b>Dealer:</b> {{item.name}}</td>
   </tr>
</div>
1

1 Answers

0
votes

works here

You have to share data between controllers in some way. The one way of doing that is to create a service

myApp.factory('data', function(){
  return {
    dealerCount : [],
    dealerName: ''
  }
});

You alse may see this video for better understanding