1

選択とリストの間に単純なAngularフィルターを設定しています。ユーザーがドロップダウンからアイテムを選択すると、リストが更新され、一致する結果が表示されます。問題は、ドロップダウンの最初に値のない[選択...]オプションがあり、それが選択された値の場合、すべての項目が表示されることです。それは理にかなっていると思いますが、私は反対のことを望んでいます。選択したオプションに値がない場合、リストを表示したくありません。ここにいくつかの関連するビットがあり、その後に完全なフィドルへのリンクが続きます：

ドロップダウン：

<select class="world-list" ng-model="selectedWorld" ng-options="world.worldId as world.worldName for world in allWorlds">
    <option value="">Select...</option>
</select>

リスト：

<ul class="unstyled" id="charList">
    <li ng-repeat="char in characters | filter:selectedWorld">
        <a href="#" class="btn btn-block" ng-click="selectChar()">{{char.charName}} - {{char.charRace}} {{char.charClass}}</a>
    </li>
</ul>

そして、これがすべてを駆動する私のJSON構造を含む完全なフィドルへのリンクです：http： //embed.plnkr.co/6XUmC5efO0Y1BRNLRUig

私がやろうとしていることはかなり単純で、Angularはかなり新しいので、明らかな何かが欠けていると確信しています。Jabbrの部屋をチェックしたが、誰もいない。:(

とにかく、すべての助けに感謝します！

4

2 に答える 2

3

これを実現する 1 つの方法は、反復オブジェクトの特定のプロパティでフィルター処理することです。

<ul class="unstyled" id="charList">
  <li ng-repeat="char in characters | filter:{worldId: selectedWorld}">
    <a href="#" class="btn btn-block" ng-click="selectChar()">{{char.charName}} - {{char.charRace}} {{char.charClass}}</a>
  </li>
</ul>

プランカー

于 2013-03-06T17:44:57.373 に答える
0

コード「script.js」で、空白のオプションを考慮していないようです。

私はこれをテストしませんでした (おそらくこの回答を提示する前にテストする必要があります) が、script.js 内に「空白」オプションを配置することで機能するはずです。

app.controller('WorldCtrl', function ($scope, $http) {
    $scope.allWorlds = [{
      worldId: "",
      worldName: ""
    },
    {
      worldId: "b8ee0530-744b-463e-9428-23178f6c7bff",
      worldName: "World 1"
    },
    {
      worldId: "81211982-5613-4f9c-b704-7b6fa35faf84",
      worldName: "World 2"
    },
    {
      worldId: "df41208e-e8d2-46c9-8299-8f37632a51f8",
      worldName: "World 3"
    }];

    $scope.characters = [{
      charClass: "Rogue",
      charName: "Vaes",
      charRace: "Human",
      worldId: "b8ee0530-744b-463e-9428-23178f6c7bff"
    },
    {
      charClass: "Warrior",
      charName: "Azash",
      charRace: "Orc",
      worldId: "b8ee0530-744b-463e-9428-23178f6c7bff"
    },
    {
      charClass: "Mage",
      charName: "Anele",
      charRace: "Ogre",
      worldId: "81211982-5613-4f9c-b704-7b6fa35faf84"
    }];
});
于 2013-03-06T17:37:32.070 に答える