如何在Angularjs中动态添加新元素

Question

我有一个ng-repeat来循环我的对象值来查看。然后我想要一个按钮来添加新的空白元素到ng-repeat值的最后一个。

我怎么能有角度地做这个？

我的数据是json对象。我试过了

In controller
$scope.objs = {'a': 'a', 'b':'b'};

In view
{{Object.keys(objs).length}};
But nothing show in view.

更新

<div ng-repeat="docstep in docs.docsteps" class="docstep">
   {{docstep.text}}
</div>

然后我想获得对象的长度，所以我可以在按钮单击中使用.length + 1但是我不知道如何获得对象的长度。或者有更好的主意吗？

Answer 1

我拿了你的ng-repeat并使它工作。请注意，我将您的对象放在$rootScope中，但您可以将同一个对象应用于ng-repeat所在的任何范围。

JS

var myApp = angular.module('myApp',[]);
    myApp.run(function($rootScope){
    $rootScope.docs={docsteps:[{text:'A'},{text:'B'},{text:'C'}]};
});

的jsfiddle：http://jsfiddle.net/mac1175/Snn9p/

Answer 2

使用ng-click将单击处理程序绑定到按钮：

<div ng-repeat="docstep in docs.docsteps" class="docstep">
   <input type="text" value="{{docstep.text}}">
</div>
<button ng-click="addNew()">Add another input</button>
When this button is clicked. It will add another blank input
<br>Which the new input will be docstep3

这就是你的JS看起来的样子：

var myApp = angular.module('myApp',[]);
myApp.run(function($rootScope){

    $rootScope.docs = {
        "docsteps" : {
            "docstep1" : {
               "text" : "a"
            },
            "docstep2" : {
               "text" : "b"
            }
        }

    }

    var c = 2; 
    $rootScope.addNew = function(){
        count++;
        $rootScope.docs.docsteps["docstep"+count] = {"text":count}
    }
});

注意：您应该使用ng-app定义角度的工作区域，并使用控制器驻留模型（docs）并定义视图的行为（addNew）。