我想创建一个不同势场这里是index.html,然后在app.js如何创建具有不同字段(angularJS)的节点?
的index.html节点
<html>
<head>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/nodeCss.css">
</head>
<body ng-app="Webapp">
<h1>Module Opale</h1>
Titre<input type="text" placeholder="Titre"><br />
Metadonnées<input type="text" placeholder="Titre"><br />
Objectif du module<input type="text" placeholder="Objectif">
<script type="text/ng-template" id="tree_item_Opale.html">
<button class="addchild" ng-click="addChild(data)">addChild</button>
<button ng-show="data.parent" ng-click="addSibling(data)">addSibling</button>
<button class="delete" ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete children</button>
<div><h3>Division</h3>
Titre division<input type="text" /><br />
Titre court<input type="text" /><br />
</div>
<div><h4>Grain de contenu</h4>
Titre<input type="text" /><br />
Titre court<input type="text" /><br />
<h5>Information</h5>
Titre<input type="text" /><br />
<textarea rows="4" cols="70"></textarea>
</div>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'tree_item_Opale.html'"></li>
</ul>
</script>
<ul ng-controller="treeCtrl">
<li ng-repeat="data in tree" ng-include="'tree_item_Opale.html'"></li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/rightClickDirective.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap/bootstrap.min.js"></script>
</body>
</html>
app.js
angular.module("Webapp", ["ngSanitize","directive.contextMenu"])
.controller("treeCtrl", ['$scope', function($scope) {
$scope.delete = function(data) {
data.nodes = [];
};
$scope.addSibling = function(data) {
var post = data.parent.nodes.length + 1;
var newName = data.parent.name + '-' + post;
data.parent.nodes.push({name: newName,nodes: [], parent: data.parent});
};
$scope.addChild = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
data.nodes.push({name: newName,nodes: [], parent: data});
};
$scope.tree = [{name: "Node", nodes: []}];
}]);
什么我希望达到的是当我创造新的孩子或兄弟姐妹时,我想要在他们的形式之间做出选择, 一次
<div><h3>Division</h3>
Titre division<input type="text" /><br />
Titre court<input type="text" /><br />
</div>
一次
<div>
<h4>Grain de contenu</h4>
Titre<input type="text" /><br />
Titre court<input type="text" /><br />
<h5>Information</h5>
Titre<input type="text" /><br />
<textarea rows="4" cols="70"></textarea>
</div>
这里是我的jsfiddle:
http://jsfiddle.net/taxr14jr/4/
在我的例子我在同一时间加入他们两个司 & GrainContenu,我不不知道如何分开他们!