методы $ scope, не распознанные из таблицы AngularJS

ProgramBox

методы $ scope, не распознанные из таблицы AngularJS

Post author:admin
Запись опубликована:13 мая, 2023
Post category:Вопросы по программированию

#javascript #angularjs #angularjs-scope #html-table

#javascript #angularjs #angularjs-scope #html-таблица

Вопрос:

Я привязываю массив через форму, используя 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 не может ее найти. Я полагаю, что это из-за массива, который я использую, но это единственный способ, которым мне удалось поместить кнопку (-) справа от тега ввода. Есть ли способ обойти это?

1. Пожалуйста, добавьте код вашего контроллера.

2. Не ответ, но должен ли ваш data-ng-repeat не быть на <tr> элементе вместо этого? Вышеуказанное приведет к появлению нескольких <tbody> ‘s …

3. Предполагается, что вы используете $index , а затем Collection.splice(INDEX,1)

4. Сначала удалите ng-repeat из тега table и добавьте его в tr-теги, как при создании множественных таблиц в HTML.

5. @Rayon, код в идеальном состоянии, removeChoice() должен вызываться со x значением в качестве параметра. Должно быть, что-то происходит в контроллере…

Ответ №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>

Ответ №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.Область #$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){

}]);

Следует попробовать этот синтаксис, передающий область видимости в виде массива, а также в вашей функции. Проблема может заключаться в том, что при выполнении функции она не передает переменную scope в контексте, доступном для выполнения.