在angular-ui-tree中使输入能够写入文本,可以通过以下步骤实现:
<ui-tree>
<ul>
<li ui-tree-node ng-repeat="node in treeData">
<div ui-tree-handle>
{{ node.text }}
</div>
<ol ui-tree-nodes ng-model="node.children">
<li ui-tree-node ng-repeat="child in node.children">
<div ui-tree-handle>
{{ child.text }}
</div>
</li>
</ol>
</li>
</ul>
</ui-tree>
treeData
。确保在控制器中初始化该变量。app.controller('TreeController', function($scope) {
$scope.treeData = [
{
text: 'Node 1',
children: [
{
text: 'Child 1'
},
{
text: 'Child 2'
}
]
},
{
text: 'Node 2',
children: [
{
text: 'Child 3'
},
{
text: 'Child 4'
}
]
}
];
});
app.controller('TreeController', function($scope) {
// ...
$scope.updateText = function(node, newText) {
node.text = newText;
};
});
updateText
函数。例如:<ui-tree>
<ul>
<li ui-tree-node ng-repeat="node in treeData">
<div ui-tree-handle>
<input type="text" ng-model="node.text" ng-change="updateText(node, node.text)">
</div>
<ol ui-tree-nodes ng-model="node.children">
<li ui-tree-node ng-repeat="child in node.children">
<div ui-tree-handle>
<input type="text" ng-model="child.text" ng-change="updateText(child, child.text)">
</div>
</li>
</ol>
</li>
</ul>
</ui-tree>
通过以上步骤,你可以在angular-ui-tree中实现输入能够写入文本的功能。当输入框中的文本发生变化时,会调用updateText
函数更新相应节点的文本内容。
领取专属 10元无门槛券
手把手带您无忧上云