2017-01-18 106 views
0

一個簡單的問題造成的。篩選與AngularJS

<div ng-if="(services | searchValue : 'type' : 'facebook').active == true"> 
... 
</div> 

這是javascript。

.filter('searchValue', function() { 
     return function (array, name_var, value) { 
      angular.forEach(array, function(v, k) { 
       if (v[name_var] == value) { 
        return v; 
       } 
      }); 
      return []; 
     }; 
    }) 

不幸的是,即使結果被發現它並沒有傳遞給模板。

如果我會使用這樣的:

{{(services | searchValue : 'type' : 'facebook')}} 

這將讓沒有價值。任何建議?

+0

我想應該是這樣的(服務| searchValue: '類型') –

回答

1

我已經爲您提供的信息創建了一個示例示例。運行下面的示例檢查。希望這可以幫助你。

我猜ng-if本身只期望變量而不是表達式。僅提供具有值的變量,即(services | searchValue : 'type' : 'facebook').active而不是表達式

var app = angular.module('application', []); 
 

 
app.filter('customfilter', function() { 
 
    return function(array, name_var, value) { 
 
    var filteredArray = {}; 
 
    angular.forEach(array, function(v, k) { 
 
     if (v[name_var] == value) { 
 
     filteredArray = v; 
 
     return false; 
 
     } 
 
    }); 
 
    return filteredArray; 
 
    } 
 

 
}); 
 
app.controller('sampleController', function($scope, $filter) { 
 
    $scope.data = [{ 
 
    "type": "facebook", 
 
    "active": false 
 
    }, { 
 
    "type": "linkedin", 
 
    "active": false 
 
    }, { 
 
    "type": "twitter", 
 
    "active": false 
 
    }, { 
 
    "type": "google", 
 
    "active": false 
 
    }]; 
 

 
    $scope.anotherdata = [{ 
 
    "type": "facebook", 
 
    "active": true 
 
    }, { 
 
    "type": "linkedin", 
 
    "active": false 
 
    }]; 
 
});
<script data-require="[email protected]" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script> 
 

 
<body ng-app="application"> 
 
    <div ng-controller="sampleController"> 
 

 
    First div - Active : false 
 
    <div ng-if="(data | customfilter:'type':'facebook').active"> 
 
     Your div content goes over here 
 
    </div> 
 
    <br> 
 
    <br>Second div - Active : true 
 
    <div ng-if="(anotherdata | customfilter:'type':'facebook').active"> 
 
     Second div rendered 
 
    </div> 
 
    </div> 
 
</body>