Question

我的HTML：

<div id="contentDiv"> 
    <div id="headerDiv" ><div id="titleDiv"> Queries</div></div>
    <div id="valuesDiv" ><div id="yearDiv"> 2015</div></div>
    <div id="graphDiv" ><div id="chartDiv">graph</div></div>
</div>

就像这个div一样，我有另一个div，但div中的内容是不同的。

当我使用angularjs点击超链接时，如何水平添加新的div？

我该怎么做？请帮我解决这个问题

Answer 1

看起来你需要的是与ng-model directive的双向绑定。因此，我们的想法是将新div绑定到范围中的变量，该变量最初处于空或未定义状态（例如，有更好的方法）。单击超链接时，它会调用ng-click指令指定的函数，该指令将填充绑定对象，这将导致呈现新的div。

编辑：根据您的评论，这是一个简单的例子。

HTML页面：

<div id="newDiv" ng-repeat="item in items">
 <!-- Div content -->
 <!-- example -->
 <input type="text" ng-model="item.name">
 </div>

 <input type="button" ng-click="addItem()">

控制器：

 $scope.items=[];
 $scope.addItem = function() {
    var newItem = {};
    newItem.name = "new item name";
    $scope.items.push(newItem);
 }

这里发生的是每个div的数据存储在一个对象数组中。 ng-repeat指令将为数组中的每个对象重复div。然后，您可以使用该对象填充div中的元素。添加一个新的div就像向数组添加一个新项一样简单，angular会为你处理剩下的事情。请注意，我没有测试过这个例子，但希望它足以让你指出正确的方向。

重新对齐水平div，这将使用CSS，使用内联块显示模式完成。所以你可以给div一个类，例如“horizontalDiv”，并将以下类添加到你的CSS文件中：

.horizontalDiv {
 display: inline-block;
}

onclick on hyperlink应使用angularjs水平添加div

1 个答案: