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
Post a Comment