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

자바 스크립트 :

.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 새로운 범위를 유도 해보십시오. 따라서 부모에 액세스 할 수는 $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){ 

}]); 

이 구문은 배열로 범위를 통과 시도해야 뿐만 아니라 귀하의 기능. 문제는 함수가 실행 가능한 컨텍스트 내에서 스코프 변수를 전달하지 않을 때 발생할 수 있습니다.