AngularJS: ng-controller multiple functions

Question

I am using AngularJS to show and retreive data from my users in HTML like:

   <table id="app2" ng-app="categories" ng-cloak="" class="table table-hover" style="margin-top: 50px;">
     <tr style="background-color:#4d748f; color:white;">
      <th colspan="5" style="text-align:center; font-size:16px;">Add category</th>
     </tr>
     <tr>
     <form novalidate>
      <td colspan="4">
       <input type="text" class="form-control" placeholder="Category name"></input>
      </td>
      <td colspan="1">
       <input type="submit" class="btn btn-success"></input>
      </td>                                    
     </form>
    </tr>
    <tr style="background-color:#4d748f; color:white;">
     <th colspan="5" style="text-align:center; font-size:16px;">Add product</th>
    </tr>
     <tr>
      <form ng-controller="category">
      <td colspan="1">
       <select class="form-control m-b-10">
       <option ng-repeat= "c in categories">{{c[1]}}</option>
       </select>
      </td>
      <td colspan="1">
      <select class="form-control m-b-10">
        <option>Antwerpen</option>
        <option>Leuven</option>
      </select> 
      </td>
      <td colspan="1">
        <input type="text" class="form-control" placeholder="Name"></input>
      </td>
      <td colspan="1">
        <input type="text" class="form-control" placeholder="Price" width="10%"></input>
      </td>
      <td colspan="1">
         <input type="submit" class="btn btn-success" ng-click="product()"></input>
      </td>                                    
     </form>
    </tr>
    </table>

ANGULARJS

categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
    var serviceBase = 'api/';
    $http.get(serviceBase + 'categories').then(function (results) {
        $scope.categories = results.data;
        for(var i = 0; i < $scope.categories.length; i++){
            var categories = $scope.categories[i];
        }
        $scope.product = function($scope, $http){
        $http.post(serviceBase + 'productadd/'+$scope.catID+'/'+$scope.catID+'/'+$scope.pname+'/'+$scope.pprice).then(function(results){
            alert('ok');
        });
        }
    });
});

When I place my ng-controller on the select item to get the ng-repeat = c in categories. Then this works and I get the categories shown in my dropdown. But when I place it on the form tag it doesn't... I have to place it on my form tag because I want to add a product into my database after the user clicks the button to add products. And ng-click=product() gets called.

How can both of those functions function together?

Your markup is wrong. You can not wrap form element around tr tag. — Kalpesh Patel
– Kalpesh Patel, Commented May 8, 2015 at 12:37
@kalpeshpatel Too broad: You don't know the DOCTYPE. So if its XML/XHTML its valide. — lin
– lin, Commented May 8, 2015 at 12:41
@lin, I agree with you for this. Thanks for pointing it though. I was referring to HTML5 doctype. — Kalpesh Patel
– Kalpesh Patel, Commented May 8, 2015 at 12:42

Pankaj Parkar · Accepted Answer · 2015-05-08 12:40:50Z

1

You cannot wrap tr with you custom element except tbody, thead, table.. Simply used ng-form directive on tr which can be used as attribute

 <tr ng-form name="myform" novalidate>
    <td colspan="4">
      <input type="text" class="form-control" placeholder="Category name"></input>
    </td>
    <td colspan="1">
       <input type="submit" class="btn btn-success"></input>
     </td>                                    
 </tr>

answered May 8, 2015 at 12:40

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: ng-controller multiple functions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related