Question

我想创建具有不同字段的节点，这里是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: []}];

}]);

我希望获得的是当我创建新的儿童或兄弟姐妹时，我想要在他们的形式之间做出选择，一次

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

在我的示例中，我同时添加了两个分区＆amp; GrainContenu ，我不知道如何分开它们！

Answer 1

使用ng-if高于分部和 GrainContenu 部分。我不理解您的要求如何只显示其中一个分区或 GrainContenu ，但您可以使用ng-if来决定显示哪一个。您可以使用单选按钮选择要显示的单选按钮。希望这会对你有所帮助。

Answer 2

Explore AngularJS documentation for ng-if and ng-show.

This may also help:
http://www.dotnet-tricks.com/Tutorial/angularjs/0TYK301214-Understanding-ng-if,-ng-switch-and-ng-repeat-directives.html

如何创建具有不同字段的节点（angularJS）？

2 个答案: