AngularJS 表中无法识别 $scope 方法答案

【问题标题】：$scope methods not recognized from table AngularJSAngularJS 表中无法识别 $scope 方法
【发布时间】：2016-10-24 18:46:31
【问题描述】：

我正在使用 ng-repeat 通过表单绑定数组。这是代码。

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

我在这个表单的控制器中有一个 $scope.removeChoice 函数，html 找不到它。我相信这是因为我正在使用的数组，但这是我设法将 (-) 按钮放在输入标签右侧的唯一方法。有什么办法绕过这个吗？

【问题讨论】：

请添加您的控制器代码。
不是答案，但您的data-ng-repeat 是否应该不在<tr> 元素上？以上会导致多个<tbody>的...
你应该使用$index然后Collection.splice(INDEX,1)
首先从表格标签中删除 ng-repeat 并将其添加到 tr 标签中，就像您在 HTML 中制作多个表格一样。
@Rayon，代码非常好，removeChoice() 应该使用 x 值作为参数调用。控制器中一定有什么事情发生...

标签： javascript angularjs angularjs-scope html-table

【解决方案1】：

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>

【讨论】：

@KrupeshKotecha Yours 在table 标签内使用ng-repeat

【解决方案2】：

ng-repeat 引入了一个新的作用域。因此要访问您必须使用的父级$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>

这在 ng-repeat 的文档中可能并不明显。您必须检查文档中的 $rootScope: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$parent

【讨论】：

【解决方案3】：

试试这个

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>

【讨论】：

【解决方案4】：

尝试使用这个：

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

【讨论】：

【解决方案5】：

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

}]);

应该尝试这种语法将范围作为数组以及在您的函数中传递。问题可能是函数在执行时没有在可执行上下文中传递作用域变量。

【讨论】：