angular.js递归树组件

最新推荐文章于 2025-06-15 13:28:07 发布

原创

最新推荐文章于 2025-06-15 13:28:07 发布 · 798 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #angular.js

效果图：
在这里插入图片描述

新建一个html文件，将代码粘贴进去，打开浏览器就能看到效果

<!DOCTYPE html>
<html>
	<head>
		<meta name="description">
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<meta charset="utf-8">
		<title>angular.js递归树组件</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.3.6/angular.js"></script>
	</head>
	<body>
		<div ng-app="com.ngbook.demo">
			<div ng-controller="DemoController as demo" class="container">
				<div class="row">
					<h1>angular.js递归树组件</h1>
				</div>

				<div class="row">
					<tree-view tree-data="demo.tree" text-field="name" value-field='id'
						item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)"
						can-checked="true">
					</tree-view>
				</div>
	
				<div class="row">
					<h2>单选框选中的值</h2>
					<pre>{
   
   {
   
   demo.selectedItem | json}}</pre>
				</div>
				<div class="row">
					<h2>点击文本选中的值</h2>
					<pre>{