Question

我想创建一个Angular驱动的页面，其中input标记绑定到其他DIV中的h3标记。

这是我的HTML的样子（使用Plunker）：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div.square {
            background-color: #ccc;
            height: 200px;
            width: 200px;
            margin: 10px;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
    <script type="text/javascript">
        var app=    angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.items=   [
                {value: ''}
            ];
            $scope.squares= [
                {value:''}
            ];

            $scope.addSomething=    function(){
                $scope.items.push({value:''});
                $scope.squares.push({value:''});
            };
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <button id="button" ng-click="addSomething()">click me</button>
  <div ng-repeat="item in items">
    <input type="text" placeholder="Headline" ng-model="item.value">
  </div>
  <div ng-repeat="square in squares">
     <div class="square">
        <h3>{{item.value}}</h3>
     </div>
  </div>
</body>
</html>

问题：我在input标记中输入的内容未显示在相应的h3标记中。当我输入第一个input标签时，我希望写入的单词出现在第一个h3标签中，依此类推第二个，第三个等等......但这不会发生。< / p>

我该如何解决这个问题？

Answer 1

如果您希望input绑定到h3标记，则必须将它们绑定到同一个数组.ie您不需要items数组和{{1数组。

squares

使用Angular，如何将`ng-repeat``div`中的`input`文本绑定到另一个`ng-repeat`中的另一个`div`？

1 个答案: