如何創建內部ng-repeat（angularJS）

我有一個SELECT選項的問題，當我做我的第一選擇時，我的SELECT的內容變空了。如何創建內部ng-repeat（angularJS）

這裏是我app.html & & app.js

app.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> 
      <select ng-model="choices" ng-options="choice as choice.name for choice in choices"></select>{{choices}} 
      <div ng-switch on="choices.id"> 
       <div ng-switch-when="1"><h3>Division</h3> 
        Titre division<input type="text" /><br /> 
        Titre court<input type="text" /><br /> 
       </div> 

       <div ng-switch-when="2"><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> 
      </div> 
     </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.choices=[ 
     {id:'1',name:'Division'}, 
     {id:'2',name:'Grain de contenu'}, 




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

nodeCss.css

ul { 
    list-style: none; 
    border-left: 1px dashed #ddd; 
} 
li { 
    margin-left: 20px; 
} 
button { 
    background: #63AE12; 
    color: #FFF; 
    border: 0; 
    font-size: 0.8em; 
    margin: 9px; 
} 
button.addchild { 
    background: #3094E7; 
} 
button.delete { 
    background: orange; 
}

當我添加的孩子或兄弟姐妹，我想選擇一個選項，第一個添加選項可供選擇，但是當我加上第二次的選項消失

來源

2015-04-27 Bouhirmani

這是因爲你使用choices，這是你的陣列，作爲你的ng-model。您需要一個不同的變量ng-model。所以會發生的是，當您選擇時，您的選擇將成爲唯一可用的選項，因爲它是您的新陣列（因爲ng-model而被綁定）。

做這樣的事情：

<select ng-model="modelChoices" ng-options="choice as choice.name for choice in choices"></select>{{modelChoices}}

來源

2015-04-27 15:32:05

如何創建內部ng-repeat（angularJS）

回答

相關問題