Question

我遇到了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-init 的表单输入时，它会在表单输入中显示最后的数据库值（例如，3，title3）

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

如果我在表单中添加value属性（例如value={{post.id}})，它将在每一行显示正确的表单值，但是当我单击提交按钮时，将不会提交value属性但它将通过ng-init的值，它不断提交最后一个数据库记录（例如3，title3），而不管点击的每一行上的表单按钮。

我附上了屏幕截图，其中显示了ng-init如何仅显示表单值中的最后一条记录，而不是显示与每个表单行对应的所有记录

但是我希望有下面的表格或者在angularjs控制器中的解决方案或等价物

下面是代码

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

Answer 1

您的代码中几乎没有问题：您的问题中的问题很少

$parent不需要绑定数据
您在每个输入中使用了两次ng-model错误
此外，ng-model自动绑定数据，不需要ng-init。

以下是解决方案：

＆＃13;

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

＆＃13;

请运行以上代码段

Here is a working DEMO

当通过ng-repeat

1 个答案: