$scope methods not recognized from table AngularJS

Question

I'm binding an array through a form using ng-repeat. Here is the code.

HTML:

<form>
   <table>
      <tr data-ng-repeat="x in names">
         <td><textarea placeholder="New Name" ng-model="x.name" name="" ></textarea></td>
         <td><button style="background:#f00;" ng-click="removeChoice(x)">-</button></td>
      </tr>
   </table>
</form>

Javascript:

.controller('TerrItemCtrl', function($scope){
$ionicModal.fromTemplateUrl('templates/addAddress.html', {
   scope: $scope,
   animation: 'animated bounceInDown',
   hideDelay: 920
}).then(function (modal) {
   $scope.names = [{ 'id': 'name1'}];
   $scope.modal = modal;
   $scope.modal.show();
});
$scope.removeChoice = function (x) {
    for (i = 0; i < $scope.names; i++) {
        if ($scope.names[i].id === x.id) {
            $scope.names.splice(i);
            break;
        }
    }
};
});

I have a $scope.removeChoice function in the controller of this form the html can't find it. I believe it's because of the array I'm using but this is the only way I've managed to put the (-) button on the right of the input tag. Any way to bypass this?

Not an answer, but should your data-ng-repeat not be on the <tr> element instead? The above will result in multiple <tbody>'s ... — davidkonrad
– davidkonrad, Commented Oct 24, 2016 at 9:28
You are suppose to use $index and then Collection.splice(INDEX,1) — Rayon
– Rayon, Commented Oct 24, 2016 at 9:29
Firstly remove ng-repeat from table tag and add it to tr tags as in you're making multple table's in HTML. — Pravin Erande
– Pravin Erande, Commented Oct 24, 2016 at 9:29
@Rayon, the code is perfectly fine,removeChoice() should be called with the x value as param. There must be something going on in the controller ... — davidkonrad
– davidkonrad, Commented Oct 24, 2016 at 9:30

Weedoze · Accepted Answer · 2016-10-24 09:43:34Z

3

var app = angular.module('myApp', []);
app.controller('TerrItemCtrl', function($scope) {
  $scope.names = ["a", "b", "c"];

  $scope.removeChoice = function(index) {
    $scope.names.splice(index, 1);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="TerrItemCtrl">
  <table>
    <tr data-ng-repeat="x in names">
      <td>
        <textarea placeholder="New Name" ng-model="x" name=""></textarea>
      </td>
      <td>
        <button style="background:#f00;" ng-click="removeChoice($index)">-</button>
      </td>
    </tr>
  </table>
</form>

answered Oct 24, 2016 at 9:43

Weedoze

14k2 gold badges38 silver badges65 bronze badges

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

1 Comment

Weedoze Over a year ago

@KrupeshKotecha Yours is using ng-repeat inside the table tag

deostroll · Accepted Answer · 2016-10-24 09:47:42Z

ng-repeat induces a new scope. Hence to access the parent you've to use $parent.someMethodInParentScope()

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.names = ["a", "b", "c"];

  $scope.removeChoice = function(x) {
    $scope.names.splice(x,1);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    <table data-ng-repeat="x in names">
      <tr>
        <td>
          <textarea placeholder="New Name" ng-model="x" name=""></textarea>
        </td>
        <td>
          <button style="background:#f00;" ng-click="$parent.removeChoice($index)">-</button>
        </td>
      </tr>
    </table>
  </form>
</div>

This may not be evident from ng-repeat's docs. You've to check the docs for $rootScope: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$parent

Krupesh Kotecha · Accepted Answer · 2016-10-24 10:46:31Z

2

Try this

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.names = ["a", "b", "c"];

  $scope.removeChoice = function(x) {
    $scope.names.splice(x, 1);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    <table>
      <tr data-ng-repeat="x in names">
        <td>
          <textarea placeholder="New Name" ng-model="x" name=""></textarea>
        </td>
        <td>
          <button style="background:#f00;" ng-click="removeChoice($index)">-</button>
        </td>
      </tr>
    </table>
  </form>
</div>

edited Oct 24, 2016 at 10:46

answered Oct 24, 2016 at 9:39

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

Comments

Araz Shamsaddinlouy · Accepted Answer · 2016-10-24 09:43:15Z

0

try to use this :

.controller('TerrItemCtrl',['$scope', function($scope){
$ionicModal.fromTemplateUrl('templates/addAddress.html', {
   scope: $scope,
   animation: 'animated bounceInDown',
   hideDelay: 920
}).then(function (modal) {
   $scope.names = [{ 'id': 'name1'}];
   $scope.modal = modal;
   $scope.modal.show();
});
$scope.removeChoice = function (x) {
    for (i = 0; i < $scope.names; i++) {
        if ($scope.names[i].id === x.id) {
            $scope.names.splice(i);
            break;
        }
    }
};
}]);

answered Oct 24, 2016 at 9:43

Araz Shamsaddinlouy

4113 silver badges14 bronze badges

Comments

Troy · Accepted Answer · 2016-10-24 09:45:30Z

-1

.controller('TerrItemCtrl', ['$scope', function($scope){

}]);

Should try this Syntax pass the scope through as an array as well as in your function. The problem might be when the function is executing it doesn't pass the scope variable within the execution-able context.

answered Oct 24, 2016 at 9:45

Troy

2111 gold badge2 silver badges15 bronze badges

Collectives™ on Stack Overflow

$scope methods not recognized from table AngularJS

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related