Gán một bộ lọc để một biến đối tượng trong góc JS

Question

Tôi có một ng-repeat sử dụng một bộ lọc như thế này:

#1 
<div class="contestReports" ng-repeat="contest in contests | filter:{votingOver:true}"> 
    <contestreport></contestreport> 
</div> 

tôi muốn cho phép khách hàng để có thể lọc nó vì vậy tôi đã giao các bộ lọc để một biến như thế này:

#2 
<div ng-init="reportFilter = {votingOver:true}"></div> 
<div class="contestReports" ng-repeat="contest in contests | filter:reportFilter"> 
    <contestreport></contestreport> 
</div> 

Mã #1 đang làm việc nhưng Mã #2 không là gì và tôi không chắc chắn lý do tại sao.

Answer 1

Bạn cũng cố gắng quấn ng-init

<div ng-init="(reportFilter = '{votingOver:true}')"></div> 

Tuy nhiên, như tôi đã nói trong bình luận của tôi trước đó - angularjs documentation bang rằng việc sử dụng ngInit là một thói quen xấu trong hầu hết mọi trường hợp. Vì vậy, đó không phải là một giải pháp cho vấn đề của bạn nếu có thể.

Và mã # 2 của bạn thực sự hoạt động, xin vui lòng kiểm tra liệng này - http://plnkr.co/edit/dBDyYPd3ZoUVdXngu52t?p=preview

//html 
    <div ng-init="reportFilter = {votingOver:false}"></div> 
<div class="contestReports" ng-repeat="contest in contests | filter:reportFilter"> 
    {{contest | json}} 
</div> 

    </div> 

//js in controller 
    $scope.contests = [ 
    {id:1, title:'1', votingOver:false}, 
    {id:2, title:'2', votingOver:true}, 
    {id:3, title:'3', votingOver:true} 
    ]; 

Answer 2

Sử dụng ng-init is not a good way to go with (như bạn có thể xem tài liệu góc đã được thêm vào văn bản cảnh báo màu đỏ). Như bạn biết nó sẽ đánh giá về việc hiển thị ban đầu chỉ (như ng-init đánh giá biểu thức của nó trong giai đoạn preLink).

Bằng cách xem mã của bạn, có vẻ như reportFilter biến sẽ là đối tượng chung cho tất cả contests. Sửa tôi nếu tôi sai?

Tôi muốn thêm giá trị này bên trong bộ điều khiển chỉ một lần như dưới đây.

//place this inside your controller 
$scope.reportFilter = { votingOver : true }; 

Và sử dụng trực tiếp trên chính chế độ xem.

<div class="contestReports" ng-repeat="contest in contests | filter:reportFilter"> 
    <contestreport></contestreport> 
</div> 

Answer 3

Better Cách thứ nhất là để lưu các kết quả của việc áp dụng bộ lọc cho dữ liệu json trong một biến trước khi ng-repeat đọc mục trong jsonArray như dưới đây.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <div ng-init="contests= 
 
     [{name:'bad apple', votingOver:false}, 
 
     {name:'pleasurebuilder', votingOver:true}, 
 
     {votingOver:true}]"> 
 
    </div> 
 
    <div ng-init="reportFilter = {votingOver:true}"> 
 
    </div> 
 
    <div ng-repeat="contest in revoluza = (contests | filter: reportFilter)"> 
 
    {{contest}} 
 
    </div> 
 
    <hr> 
 
</div>

Answer 4

Mã 2 không hoạt động bởi vì bạn phải tạo bộ lọc tùy chỉnh trong khi bạn đang chỉ intializing div không tạo bộ lọc

Mã 1 đang làm việc bởi vì bạn đang sử dụng cú pháp thích hợp cho mặc định bộ lọc có thể được so sánh với bất kỳ đối tượng nào giống như bạn đã làm