$ scopeメソッドがテーブルから認識されないAngularJS

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

私はhtmlのはそれを見つけることができません。この形式のコントローラで$ scope.removeChoice機能を持っています。私はそれが私が使用している配列のためだと信じていますが、これは入力タグの右側に（ - ）ボタンを置くことができた唯一の方法です。これを回避する方法はありますか？

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

この

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>

Answer 3

ng-repeatを試してみては新しいスコープを誘導します。したがって、あなたはこれがNGリピートのドキュメントから明らかではないかもしれない$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>

を使用してきた親にアクセスします。あなたは$rootScopeのためにドキュメントをチェックしました：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){ 

}]); 

はこの構文配列として範囲を通過してみてくださいあなたの機能に加えて、問題は、関数が実行可能なコンテキスト内でスコープ変数を渡していないときに実行されることがあります。