Question

我正在创建在angularjs中添加更多字段功能。我正在使用下面的代码
的Javascript

 <script>
   function FruitsController($scope){
        var div = 'Apple';            
        $scope.fruits=[];
        $scope.addFruit=function(){
          $scope.fruits.push(div);
        }
    } 

 <script>

HTML

<ul><li ng-repeat="fruit in fruits">{{fruit}}</li></ul>
<button ng-click="addFruit()">Add</button>

以上代码成功运作并附加了Apple＆＃39;身体中的字符串。但我想像字符串一样追加输入类型的文本字段。所以我使用下面的脚本不起作用。

      <script>
       function FruitsController($scope){
            var div = '<input type="text">';            
            $scope.fruits=[];
            $scope.addFruit=function(){
              $scope.fruits.push(div);
            }
        } 

     <script>

我知道上面的代码是完全错误的。请给我一些如何在angularjs

中添加输入类型的ideo

Answer 1

您可以在html中呈现UI元素。 您的HTML看起来像

    <ul>
        <li ng-repeat="fruit in fruits">
              <input ng-model="fruit">
      </li>
   </ul>
   <button ng-click="addFruit()">Add</button>

控制器看起来像

<script>
       function FruitsController($scope){
            var fruit = 'apple';            
            $scope.fruits=[];
            $scope.addFruit=function(){
              $scope.fruits.push(fruit);
            }
        } 

<script>

Answer 2

<ul>
    <li ng-repeat="fruit in fruits">
        <input ng-model="fruit">
    </li>
</ul>
<button ng-click="addFruit()">Add</button>

将您的UI / HTML代码保存在HTML模板中，在控制器中保留纯数据结构。通过Angular的双向数据绑定，ng-model将在您的输入更改时直接更新$scope.fruits中的条目。

Answer 3

试试这个。对于输入文本框，您需要使用ng-model属性，因为它是双向数据绑定。

<ul>
    <li ng-repeat="fruit in fruits">
        <input type="text" ng-model="fruit">
    </li>
</ul>
<button ng-click="addFruit()">Add</button>

如何在angularjs中使用push（）函数追加输入字段？

3 个答案: