2015-04-22 62 views
0

我想创建一个不同势场这里是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,我不不知道如何分开他们!

回答

0

使用ng - 如果您的部分以上部门GrainContenu。我不理解你的要求如何只显示其中一个分区GrainContenu但你可以使用ng-if来决定显示哪一个。您可以使用单选按钮选择显示哪一个。希望这可以帮助你。