Question

我是AngularJS的新手，并决定用它创建一些个人项目。但是我试图避免多次显示一个值。我的模型看起来像这样：

{
    "artist": "Tinchy Stryder",
    "album": "Catch 22",
    "filename": "01 - Take Off.mp3",
    "filepath": "Tinchy Stryder\/Catch 22\/01 - Take Off.mp3",
    "modified": 1388837746
},
{
    "artist": "Tinchy Stryder",
    "album": "Catch 22",
    "filename": "02 - I'm Landing.mp3",
    "filepath": "Tinchy Stryder\/Catch 22\/02 - I'm Landing.mp3",
    "modified": 1388837800
},
{
    "artist": "Tinchy Stryder",
    "album": "Catch 22",
    "filename": "03 - Take Me Back (feat. Taio Cruz).mp3",
    "filepath": "Tinchy Stryder\/Catch 22\/03 - Take Me Back (feat. Taio Cruz).mp3",
    "modified": 1388837861
}

我想只展示一次“艺术家”。我不想将ng-repeat限制为一个项目，因为我需要重复每个文件名。我试过创建这个过滤器：

musicApp.filter('uniqueartist', function(){
    var keys = [];
    var output = "";

    return function(input, opt){

        if(keys.indexOf(input) === -1){
            output = input; 
            console.log(output)
            return output;
        }else{
            output = "";
            return output;
        }

        console.log(keys.indexOf(input));
        keys.push(input);

        return output;
    }
});

但它仍然会在每次重复时返回艺术家名称。这是我的HTML的剪辑

<div class="row" data-ng-controller="SimpleController">
    <li ng-repeat="music in musics">
        <header><h4>{{music.artist | uniqueartist }}</h4></header>
        <p>{{music.filename}}</p>
        <a href="{{music.filepath}}">Listen</a>
    </li>
</div>

为什么这不起作用？

Answer 1

即使在keys.push(input)之前，您回来的时间太早了。

此外，将状态保留在过滤器中是个坏主意，因为它们可能被称为任意次数。例如，如果数组发生更改，则ng-repeat可能会再次运行，在这种情况下不会显示任何内容，因为过滤器状态不会重置。

最好在控制器本身显示之前修改数据模型。如果您不想进行破坏性更改，也许可以添加其他属性。

AngularJS过滤器不返回自定义结果

1 个答案: