Question

我使用 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找不到它。我相信这是因为我正在使用的数组，但这是我设法将（ - ）按钮放在输入标签右侧的唯一方法。有没有办法绕过这个？

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

Answer 2

试试这个

＆＃13;

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.names = ["a", "b", "c"];

  $scope.removeChoice = function(x) {
    $scope.names.splice(x, 1);
  }
})

＆＃13;

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

＆＃13;

Answer 3

function Success() { console.log("Success") } function Failure() { console.log("Failure") }引发了一个新的范围。因此，要访问父级，您必须使用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);
  }
})

这在ng-repeat的文档中可能并不明显。您需要查看<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>的文档：https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$parent

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

Answer 5

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

}]);

应该尝试这个语法通过作为数组和函数传递范围。问题可能是函数执行时它没有在可执行的上下文中传递范围变量。

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

5 个答案: