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 ）。

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

2 个答案:

JS