我有一个动态导航菜单,对应于传递到表格创建的各种过滤器,根据按下的按钮过滤表格中的内容。
我在$ scope中有一个名为$scope.uniqueFilter
的变量。选择的过滤器取决于按下的按钮。在链接的ng-click
上,我定义了一个函数,它接受按钮参数的输入,将其传递给此函数,然后将$scope.uniqueFilter
设置为等于按钮的特定过滤方法。
Onclick,我已经能够按预期传递所需的过滤器,但它们不仅没有应用于内容,而且它们完全阻止了表的创建。
我试图重复的行的内容如下所示:
<tr class="progress" ng-repeat="idea in ideas | filter:uniqueFilter" >
更改uniqueFilter的按钮设置如下:
<div class="nav">
<div ng-controller="NavController">
<p ng-repeat="link in links">
<block class="button" href="{{link.URL}}" title="{{link.name}}">
<a href="{{link.URL}}" ng-click="getFilter(link.show)">
{{link.name}}
</a>
</block>
</p>
</div>
</div>
这是NavController的内容:
app.controller('NavController', ['$scope', 'DataFactory', function($scope, DataFactory){
$scope.links = [
{'name':'About', //title that will be displayed on the link
'URL': '#/about', //URL/view that the link will lead to/show
'show':'(not actually a filter here)' //view may simply change so some info is hidden or revealed
},
{'name':'Active',
'URL': '#/active',
'show':'active' //I want all things with active:true
},
{'name':'Complete',
'URL': '#/active', //this is supposed to go to #/active, not a bug
'show':'!active' //I want all things with active:false
}
];
$scope.ideas = DataFactory;
$scope.uniqueFilter=''; //variable to allow access to individual filters based on which button is clicked
$scope.getFilter = function(theFilter){ //called onclick for each button and passes in the link.show that each button has, defining the filter to use
$scope.uniqueFilter = theFilter; //sets the variable to match desired filter
alert("I just set the filter to "+$scope.uniqueFilter);
};
}]);
DataFactory,填充表格的内容:
app.factory('DataFactory', function(){
return [
{'title':'Title1',
'A': '80',
'B': '6',
'active': true //this is what should determine if it shows or not
},
{'title':'Title2',
'A': '80',
'B': '6',
'active': true
},
{'title':'Title3',
'A': '80',
'B': '6',
'active': false
},
];
});
我觉得我错过了一些明显的东西,但我想我对Angular不够透彻,无法找到它。 感谢您提供任何帮助!
修改
所以我提出了一些建议的更新。
以下是我的ng-repeat标签的更好视图:
<table>
<tr class="title_bar">
<td>Title</td>
<td>A</td>
<td>B</td>
</tr>
<tr class="progress" ng-repeat="idea in ideas | filter:uniqueFilter">
<!-- uniqueFilter here does nothing, and {value:true} stops values from appearing,
but {active:true}(and false) works. But I need this filter to change based on what
is clicked, hence why I want uniqueFilter to work -->
<td>{{idea.title}}</td>
<td>{{idea.A}}</td>
<td>{{idea.B}}</td>
</tr>
</table>
以下是我将NavController链接数组更改为:
$scope.links = [
{'name':'About', //title that will be displayed on the link
'URL': '#/about', //URL/view that the link will lead to/show
'show':'(not actually a filter here)' //view may simply change so some info is hidden or revealed
},
{'name':'Active',
'URL': '#/active',
'show': {'active': true} //unsure if this needs to be 'active' or active without quotes; in the DataFactory, it's in quotes
},
{'name':'Complete',
'URL': '#/active',
'show':{'active': false}
}
];
答案 0 :(得分:1)
你很亲密。您没有显示您的ng-repeat,但基本上您只是想确保正确设置uniqueFilter的措辞...
{ 'name':'Active',
'URL': '#/active',
'show': { active:true } // <-- this is what you'd pass to your "filter:" expression
},
{ 'name':'Complete',
'URL': '#/active',
'show': { active:false } // <-- this is what you'd pass to your "filter:" expression
}
所以基本上你的ng-repeat看起来(有点像),它确切地传递了什么过滤器需要使用布尔值来工作。
<li ng-repeat="item in items | filter: uniqueFilter">
// which for example would translate into:
<li ng-repeat="item in items | filter:{value:true}"> // or
<li ng-repeat="item in items | filter:{value:false}">
// allowing it to work with boolean values