Search code examples
angularjsangularjs-controller

Variable showing as undefined

I am having trouble with passing the results of checkboxes from my view to the controller and just get "undefined" in the console log.

FYI - I have my controller as "camp".

In my view I have the following:

   <div  style="padding:20px;">
      <h5>Add a Business</h5>
      <md-content style="padding:20px;">

       <md-checkbox 
       ng-repeat="business in camp.businesses" 
       ng-model="business.selected" 
       aria-label="Checkbox"
       >
        {{business.business_name}}
      </md-checkbox>

      </md-content>

      <md-button class="md-raised" ng-click="camp.addBusinesses(business)">
        <i class="fa fa-plus"></i> Add 
      </md-button>

    </div>

In my controller I have the following function in an "angular.extend()"

addBusinesses: function(val){
  console.log('Display Results: ',  val);
}

If I just use the function to log the click event, it's fine. But when I try to pass the "business" object, it says "undefined".

What am I missing here???

Solution

  • The issue is your <md-button> is outside the ng-repeat. Your ng-repeat ends with the </md-checkbox> so when it gets to the button, business is indeed undefined.

    Try reformatting your code so that the button is still within the scope of the ng-repeat. Maybe you want the repeat on the md-content instead? I'm not sure what the page is supposed to look like so I can't advise more than that.