How can i create nodes with different fields (angularJS)? -


i want create node diffrent fields here index.html , app.js

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: []}];  }]); 

what hope attain when create new child or sibling, wanna have choose between forms, once

<div><h3>division</h3>  titre division<input type="text" /><br />  titre court<input type="text" /><br /> </div>  

once

<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> 

here jsfiddle:
http://jsfiddle.net/taxr14jr/4/

in example add both of them @ same time division & graincontenu , don't know how separate them !!

use ng-if above sections division , graincontenu. not understanding requirement how want show 1 of them either division or graincontenu can use ng-if decide 1 show. can use radio button choose 1 display. hope helps you.


Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -