3

$scope次のような AngularJS コントローラー内で変数を使用したいと考えています。

$scope.hierarchy = {
  name: 'bob',
  selected: true,
  children: [
    { name: 'frank' },
    {
      name: 'spike',
      children: [
        { name: 'mike' },
        { name: 'ben' },
        { name: 'gloria' },
      ]
    },
    {
      name: 'lisa',
      selected: true,
      children: [
        { name: 'bobby' },
        { name: 'carol' },
        { name: 'roger' },
      ]
    },
  ]
}

テンプレートに入力します。問題は、選択したアイテムの子用の新しいボックスを使用して、1 つのボックスに 1 つのレベルですべてを一覧表示することです (OSX Finder のフォルダー ブラウジングを考えてください)。

理想的には、次のようなものをレンダリングするAngularテンプレートが必要です。

+------+ +--------+ +-------+
| >bob | |  frank | | bobby |
+------+ |  spike | | carol |
         | >lisa  | | roger |
         +--------+ +-------+

これは表面上は単純な作業のように見えますが、私が厚かましすぎて解決策を考えられないか、問題が見た目よりも難しいかのどちらかです。助けてくれてありがとう！

4

1 に答える 1

0

Cherniv の例に基づいて、 ここに実用的な fiddle があります。レイアウトを変更するだけで、lisa の代わりに「selected: true」をスパイクに配置すると、正しく調整されることがわかります。

HTML:

<script type="text/ng-template"  id="tree_item_renderer.html">
    <ul>
        <li ng-repeat="data in data.children">
            {{data.name}}
            <ul>
                <span ng-switch on="data.selected">
                <div ng-switch-when="true" ng-include="'tree_item_renderer.html'">
                </li>
                </span>
            </ul>
        </li>
    </ul>
</script>

<div ng-controller="TreeController">
    <div ng-include="'tree_item_renderer.html'">
    </div>
</div>
</ul>

Javascript:

var myApp = angular.module("myApp", []);
myApp.controller("TreeController", ['$scope', function($scope) {
    $scope.data = {
        children: [{
          name: 'bob',
          selected: true,
          children: [
            { name: 'frank' },
            {
              name: 'spike',
              children: [
                { name: 'mike' },
                { name: 'ben' },
                { name: 'gloria' },
              ]
            },
            {
              name: 'lisa',
              selected: true,
              children: [
                { name: 'bobby' },
                { name: 'carol' },
                { name: 'roger' },
              ]
            }
          ]
        }]
    }

}]);
于 2013-10-18T21:59:17.720 に答える