代码之家 › 专栏 › 技术社区 › Valeriane

ng repeat:ng模型添加新元素问题

angularjs-ng-repeat angularjs

Valeriane · 技术社区 · 7 年前

我有我的输入形式和使用ng重复我添加新的输入字段和按钮。每个输入都已由“文本”完成。

我在浏览器调试器中验证,并且Items数组的第一个元素不是空的。为什么输入中不存在?

<div class="row">
    <div class="col-sm-10">
        <input ng-repeat="item in vm.myItemsArray" 
        name="myItemName" 
        class="form-control" 
        type="text" 
        ng-model="item.value"/>
    </div>
    <div class="col-sm-1 col-sm-offset-1">
        <span ng-click="addItem()" class="glyphicon glyphicon-plus btn-sm btn-default"/>
    </div>
</div>

和JS:

// INITIALIZE INPUTS
vm.myItemsArray = [{value: "text"}];

// ADD NEW INPUTS
function addItem() {
    vm.myItemsArray.push({value: "text"});
}

1 回复 | 直到 7 年前

DeepaliK 7 年前

(function() {
    'use strict';
    angular
        .module('angularExampleModule',[])
        .controller('angularExampleController', ['$scope', angularExampleController]);

    function angularExampleController($scope){
      $scope.myItemsArray = [{value: "text"}];
      $scope.addItem = function () {
      	$scope.myItemsArray.push({value: "text"});
      }
}
})();

.input-element{
  margin:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularExampleModule" ng-controller="angularExampleController">
<div class="row">
    <div class="col-sm-10 input-element" ng-repeat="item in myItemsArray">
        <input name="myItemName" class="form-control" type="text" ng-model="item.value"/>
    </div>
    <div class="col-sm-1 col-sm-offset-1">
    <button ng-click="addItem()" class="glyphicon glyphicon-plus btn-sm btn-default">Add Item</button>
 
    </div>
</div>

或者看看这个 https://codepen.io/DeepaliK/pen/BqXqNB

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前