AngularJS過濾器上的空字符串

我有一個簡單的Angular過濾器設置選擇和列表之間。當用戶從下拉列表中選擇一個項目時，列表會更新以顯示匹配結果。問題是我在下拉列表中首先有一個「選擇...」選項，沒有任何值，當它是選定的值時，顯示所有項目。我想這是有道理的，但我想要的是相反的。如果選定的選項沒有值，我不想顯示列表。這裏有一些相關的位，然後是一個鏈接到一個完整的小提琴：AngularJS過濾器上的空字符串

下拉：

<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室，沒有人。 :(

無論如何，感謝任何及所有幫助！

來源

2013-03-06 James McConnell

一種方式來做到這一點是通過迭代的特定屬性進行過濾對象：

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

Plunker

來源

2013-03-06 17:44:57 Stewie

工作就像一個魅力！謝謝，stewie。 :) – 2013-03-06 18:08:21

與1.1.5這不再起作用 - 這裏是掠奪者的叉子與1.1.5 – chrismarx 2013-09-12 19:04:04

我在你的代碼注意「的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-06 17:37:32 Javamav

不會把我的編輯，因爲它只是一個間隔的問題，但你的最後一行，你的'app.controller'線以固定格式前加四個空格或製表符。是的，發佈答案之前的測試通常是一件好事:) – 2013-06-15 16:30:11

AngularJS過濾器上的空字符串

回答

相關問題