Переменная области видимости Angularjs с точечным отображением в ng-repeat - PullRequest
Новая
       2

Переменная области видимости Angularjs с точечным отображением в ng-repeat

0 голосов
/ 09 июня 2018

У меня есть форма angularjs, которую я пытаюсь отправить.Переменные области действия имеют каждую форму переменных ng-модели с точкой, например ng-model="post.title", ng-model="post.pid".

Проблема, с которой я сталкиваюсь, заключается в том, что post.pid и post.title продолжает предупреждать значения undefined всякий раз, когда нажимается кнопка отправки ..

Я прочесал стекозахват для решения и обнаружил, что эти две ссылки

Атрибут формы области AngularJS $ не определен после ng-submit

область видимости с точкой (.) Не инициализирует значения для полей ввода в угловых значениях

и их ответы заключались в том, что я должен сначала инициализировать $scope.postпоэтому я реализовал его следующим образом, основываясь на решениях, предоставленных обеими ссылками. 

$scope.post = {}; 
  $scope.submitButton = function(){
alert($scope.post.pid);
alert($scope.post.title);
  }

И все же он продолжает предупреждать Не определено каждый раз при нажатии кнопки отправки.

Ниже приведен весь код 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="post in posts">
  <form>
    post Id<br>
    <input type='text' ng-model="post.pid" >
    <br> post Title<br>
    <input type='text' ng-model="post.title" name="title">
    <br>
    <input type='button' id='but_save' value='Save' ng-click="submitButton()">
</form>
</div>


<script>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http, $parse) {

  $scope.posts = [
    {
      "pid" : "1",
      "title" : "title1"
    },
    {
      "pid" : "2",
      "title" : "title2"
    },
    {
      "pid" : "3",
      "title" : "title3"
    },
  ]




$scope.post = {}; 


  $scope.submitButton = function(){

alert($scope.post.pid);
alert($scope.post.title);
  }

});
</script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 09 июня 2018

Ваша проблема в том, что post в ng-repeat отличается от $scope.post, потому что ng-repeat создает вложенную область действия:

Директива ngRepeat создает шаблон один раз запредмет из коллекции.Каждый экземпляр шаблона получает свою собственную область видимости, где заданная переменная цикла установлена ​​на текущий элемент коллекции

Чтобы ваша submitButton функция видела входные данные, вам потребуется:

  • либо передать ему $index отправленного сообщения и получить значения из $scope.posts
  • , либо передать непосредственно значения в качестве аргументов функции

Я быизбегайте манипуляций с индексами и переходите ко второму варианту: 

<input type='button' id='but_save' value='Save' ng-click="submitButton(post.pid,post.title)">
0 голосов
/ 09 июня 2018

Поскольку ng-repeat создает дочернюю область для каждого элемента, она не видна родительской области.

Передача объекта post в качестве аргумента функции отправки: 

<div ng-repeat="post in posts">
  <form>
    post Id<br>
    <input type='text' ng-model="post.pid" >
    <br> post Title<br>
    <input type='text' ng-model="post.title" name="title">
    <br>
    <input type='button' id='but_save{{$index}}' value='Save'
           ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶u̶b̶m̶i̶t̶B̶u̶t̶t̶o̶n̶(̶)̶"̶
           ng-click="submitButton(post)" />
  </form>
</div>

Используйте этот аргумент в функции: 

$scope.submitButton = function(post){
    ̶a̶l̶e̶r̶t̶(̶$̶s̶c̶o̶p̶e̶.̶p̶o̶s̶t̶.̶p̶i̶d̶)̶;̶
    alert(post.pid);
    ̶a̶l̶e̶r̶t̶(̶$̶s̶c̶o̶p̶e̶.̶p̶o̶s̶t̶.̶t̶i̶t̶l̶e̶)̶;̶
    alert(post.title);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...