CODEWITHSUNDEEP
javascriptjsonangularjs
hackp0int
hackp0int

Reputation: 4169

Create a list of items built using angularjs

I would like to create a list of items built in Directive and share through controllers.

Here is my example in plunker: Example of my code

Here is my code in js:

var app = angular.module('app', []);

app.controller("BrunchesCtrl", function ($scope, $log) {
    $scope.brunches = [];

    $scope.addNew = function () {
        $scope.brunches.push({ address: "" });
    };
    $scope.$watch('brunch.address', function(value) {
        $scope.address = value;
        $log.info($scope.address);
    });

    $scope.$watch(function() { return $scope.brunches.length; }, function() {
        $scope.brunches = $scope.brunches.map(function (brunch) {
            return brunch;
        });
    });
});

app.directive('brunchesView', function ($compile) {
    return {
        restrict: 'E',
        templateUrl: 'brunch.html',
        controller: 'BrunchesCtrl',
        replace: true,
        link: function (scope, element, attrs, controller) {

        }
    };
});

app.directive('businessSubmit', function ($log, $compile, formManagerService) {
    return {
        restrict: 'AE',
        controller: 'BrunchesCtrl',
        link: function (scope, element, attrs, controller) {
            formManagerService.init();
            var hasError;

            element.on('click', function (e) {
                e.preventDefault();
                $log.info("brunches: \n");
                $log.info(scope.brunches);
            });
        }
    };
});

Here is an HTML:

<!DOCTYPE html>


          <div class="controls">
               <a class="btn btn-danger" id="addBrunch" data-ng-click="addNew()">
                  <i class="icon-plus-sign"></i>
                  add new...
              </a>
          </div>
      </div>

      <brunches-view class="well" data-ng-repeat="brunch in brunches">{{brunch}}</brunches-view>

      <br/>
      <p class="well">
          JSON: {{brunches | json}}
      </p>

      <div class="control-group">
          <div class="controls">
              <a class="btn btn-primary" href="#" data-business-submit>
                  <i class="icon-save"></i>
                  Save...
              </a>
          </div>
      </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>      
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script src="script.js"></script>

And here is the template:

<div class="fc-border-separate">
    <div class="control-group">
        <label class="control-label">Address</label>
        <div class="controls">
            <input type="text" class="span6 m-wrap"
                   name="Address" data-ng-model="address" 
                   value="{{address}}" />
        </div>
    </div>
</div>

The final thing I want to save the whole data inside the BusinessSubmit directive.

Help please...

Upvotes: 0

Views: 4966

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Several issues with your code.

First, your ng-model for the <input> is set to address, but the object you are wanting to bind it to a brunch object that has an address property. Important to realize that ng-repeat will create a child scope for every repeated item

<input data-ng-model="brunch.address"/>

Another issue is you are assigning the parent controller to a directive as well. Important to understand that controllers are singletons so if you use controller more than once , each is a separate instance. Therefore nesting the parent controller in a directive makes no sense.

DEMO- [ng-model] fix

If you want the data shared with other controllers you should set up a service that holds the brunches data by injecting it into whatever controllers will need access

Upvotes: 1

Related Questions