CODEWITHSUNDEEP
javascriptangularjsangularjs-scopehtml-table
i_ll_be_back
i_ll_be_back

Reputation: 317

$scope methods not recognized from table AngularJS

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?

Upvotes: 0

Views: 97

Answers (5)

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

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>

Upvotes: 2

deostroll
deostroll

Reputation: 11975

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

Upvotes: 2

Troy
Troy

Reputation: 211

.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.

Upvotes: -1

Weedoze
Weedoze

Reputation: 13943

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>

Upvotes: 3

Araz Shamsaddinlouy
Araz Shamsaddinlouy

Reputation: 401

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;
        }
    }
};
}]);

Upvotes: 0

Related Questions