Angularjs Ng-init показывает те же самые полученные значения формы при передаче через ng-repeat - PullRequest
Новая
       2

Angularjs Ng-init показывает те же самые полученные значения формы при передаче через ng-repeat

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

У меня проблемы с angularjs ng-init ().В моей таблице под названием post, у меня есть 3 строки.Например, 

insert into post(id,title)values(1,'title1');
insert into post(id,title)values(2,'title2');
insert into post(id,title)values(3,'title3');

Теперь я извлек записи и прошёл через ng-repeat, и все работает отлично.

Моя проблема заключается в функции ng-init () .когда я передал значения базы данных во входные данные формы с ng-init , инициализированными в ng-repeat , он отображает последние значения базы данных во всех входных данных формы (Например,3, title3) 

<input type='text' ng-model='title' ng-model='$parent.title' ng-init="$parent.title=post.title" >

Если я добавлю атрибут значения в форму (например, value={{post.id}}), он покажет правильные значения формы в каждой строке, но когда я нажимаю кнопку отправки,Атрибут value не будет передан, но он скорее передаст значение в ng-init, который продолжает отправлять только последние записи базы данных (например, 3, title3) независимо от кнопки формы в каждой строке, по которой был выполнен щелчок.

Я приложил снимок экрана, который показывает, как ng-init отображает только последнюю запись в значениях формы вместо отображения всех записей, соответствующих каждой строке формы

enter image description here

но я ожидал получить приведенную ниже форму или обходной путь в контроллере angularjs или его эквивалентах

enter image description here

нижеэто код 

<!doctype html>
<html>

<head>


</head>

<body ng-app='myapp'>
  <div class="content" ng-controller='fetchCtrl'>
    <div class="post" ng-repeat='post in posts'>

<form bind-to-scope='$parent' >

                    post Id<br>
                    <input type='text' ng-model='pid' ng-model='$parent.pid' ng-init="$parent.pid=post.id" >
                <br>

post Title<br>
                    <input type='text' ng-model='title' ng-model='$parent.title' ng-init="$parent.title=post.title" >
                <br>


                   <input type='button' id='but_save' value='Save' ng-click="submitButton()" >
</form>



      </div>
    </div>
  </div>

  <!-- Script -->
  <script src="angular.min.js"></script>




 <script>
        var fetch = angular.module('myapp', []);

        fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {


            // Add new record
            $scope.submitButton = function(){

var pid=$scope.pid;

//alert variables values that is all I want
alert(pid);


// do http thing here if you like

             $http({   

            });


            }
// Fetch post data scope goes here

        </script>

</body>

</html>

1 Ответ

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

У вас есть несколько проблем в вашем коде: Вот несколько вопросов в вашем вопросе

  • $parent не требуется для привязки данных
  • Вывзяли ng-модель дважды в каждом входе, что неверно
  • Кроме того, ng-модель автоматически связывает данные, ng-init не требуется.

Вотрешение: 

<!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'>
    <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) {
  $scope.posts = [
    {
      "pid" : "1",
      "title" : "title1"
    },
    {
      "pid" : "2",
      "title" : "title2"
    },
    {
      "pid" : "3",
      "title" : "title3"
    },
  ]
  
  $scope.submitButton = function(){
    alert(angular.toJson($scope.posts))
  }
  
});
</script>

</body>
</html>

Пожалуйста, запустите приведенный выше фрагмент

Вот рабочий ДЕМО

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...