Làm cách nào để lọc mảng bằng AngularJS và sử dụng thuộc tính của đối tượng được lọc làm thuộc tính ng-model?

122

Nếu tôi có một mảng đối tượng và tôi muốn liên kết mô hình Angular với thuộc tính của một trong các phần tử dựa trên bộ lọc, làm cách nào để thực hiện điều đó? Tôi có thể giải thích rõ hơn bằng một ví dụ cụ thể:

HTML:

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>
    <body ng-controller="MyCtrl">
        <input ng-model="results.year">
        <input ng-model="results.subjects.title | filter:{grade:'C'}">
    </body>
</html>

Bộ điều khiển:

function MyCtrl($scope) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
}

JSBin: http://jsbin.com/adisax/1/edit

Tôi muốn lọc đầu vào thứ hai cho chủ đề có điểm 'C', nhưng tôi không muốn ràng buộc mô hình với điểm ; Tôi muốn gắn nó với tiêu đề của môn học có điểm 'C'.

Điều này có khả thi không, và nếu có, nó được thực hiện như thế nào?

angularjs

— Bernhard Hofmann
nguồn

127

<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>

— JB Nizet
nguồn

1

Tôi hiểu bạn đang đi đâu với điều đó, nhưng tôi thực sự không muốn một bộ lặp. Thuộc tính mà tôi thực sự sẽ lọc là một cột nhận dạng, vì vậy nó là duy nhất. Nhưng tôi thấy rằng đây sẽ là cách chính xác để giải quyết vấn đề chung chung.

— Bernhard Hofmann,

1

đây là hướng dẫn dành cho người Ý :) dev.stasbranger.com/post/77190983049/…

— Silvio Troia

10

điều này rất hữu ích và đối với nghịch đảo (mọi thứ khác ngoài C), điều này sẽ hoạt động:filter:{grade:'!'+'C'}

— pulkitsinghal

2

Bạn có thể làm tương tự với a grade array? Trong trường hợp của tôi, tôi xây dựng mảng lớp của mình từ chế độ xem dạng cây và muốn lọc kết quả cho những người trong mảng.

— Juan Carlos Oropeza,

157

Bạn có thể sử dụng bộ lọc "bộ lọc" trong bộ điều khiển của mình để lấy tất cả các điểm "C". Lấy phần tử đầu tiên của mảng kết quả sẽ cung cấp cho bạn tên của môn học có điểm "C".

$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];

http://jsbin.com/ewitun/1/edit

Tương tự với ES6 đơn giản:

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]

— Oliver
nguồn

tôi xin lỗi vì tôi không theo dõi bộ lọc thứ hai ('bộ lọc'), bạn có thể giải thích thêm một chút không?

— Winnemucca

1

@stevek Đó là tên của bộ lọc. Phương thức filter () cung cấp cho bạn bộ lọc. Nó chỉ là bộ lọc được gọi là bộ lọc vì nó lọc một mảng. Nó sẽ trông giống như thế này với bộ lọc tiền tệ: $ filter ('currency') (số tiền, biểu tượng, fractionSize) Kiểm tra tài liệu tại đây: docs.angularjs.org/api/ng/filter

— Oliver

61

Đây là một JSBin đã được sửa đổi với một mẫu hoạt động:

http://jsbin.com/sezamuja/1/edit

Đây là những gì tôi đã làm với các bộ lọc trong đầu vào:

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">

— lukeatdesignworks
nguồn

1

Đây là thỏa thuận thực sự. Đây là sức mạnh. Đây là con đường. Tôi đã đi với điều này và bây giờ tôi hạnh phúc.

— user1576978

13

xin lưu ý, nếu bạn sử dụng bộ lọc $ như thế này:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

và bạn tình cờ có một điểm khác cho, Ồ tôi không biết, CC hoặc AC hoặc C + hoặc CCC nó kéo họ vào. bạn cần thêm một yêu cầu cho một kết hợp chính xác:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);

Điều này thực sự giết chết tôi khi tôi lấy một số chi tiết hoa hồng như thế này:

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];

chỉ được gọi cho một lỗi vì nó đang kéo ID hoa hồng 56 thay vì 6.

Thêm lực lượng thực sự một trận đấu chính xác.

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];

Tuy nhiên, tôi vẫn thích điều này hơn (tôi sử dụng kiểu chữ, do đó "Let" và =>):

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
             return item.commission_type_id === 6;
           })[0];

Tôi làm điều đó bởi vì, tại một thời điểm nào đó, tôi có thể muốn lấy thêm một số thông tin từ dữ liệu đã lọc đó, v.v. ... có chức năng ngay trong đó loại bỏ mui xe.

— Daniel Morris
nguồn

Tôi đã gặp lỗi tương tự như bạn, cảm ơn vì gợi ý với tham số boolean thứ ba. Không biết về nó.

— Georg Leber

12

nếu bạn muốn tạo một danh sách kết quả riêng biệt trong bộ điều khiển, bạn có thể áp dụng một bộ lọc

function MyCtrl($scope, filterFilter) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
  //create a filtered array of results 
  //with grade 'C' or subjects that have been failed
  $scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'});
}

Sau đó, bạn có thể tham chiếu failSubjects giống như cách bạn tham chiếu đối tượng results

bạn có thể đọc thêm về nó tại đây https://docs.angularjs.org/guide/filter

vì góc câu trả lời này đã cập nhật tài liệu nên giờ đây họ khuyên bạn nên gọi bộ lọc

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

— Kieran
nguồn

filterFilter là gì? nó là bất kỳ dịch vụ hoặc chỉ thị? mã cho filterFilter ở đâu?

— Mou

nó là một dịch vụ góc cạnh. Hãy xem ví dụ đầu tiên trong liên kết ở trên. (trong tệp scripts.js)

— Kieran

mặc dù họ đã thay đổi filterFilter tài liệu vẫn hoạt động ..

— Kieran

4

Bạn cũng có thể sử dụng các chức năng với $filter('filter'):

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});

— Nelu
nguồn

4

Nếu bạn đang sử dụng ES6, bạn có thể:

var sample = [1, 2, 3]

var result = sample.filter(elem => elem !== 2)

/* output */
[1, 3]

Cũng lưu ý rằng bộ lọc không cập nhật mảng hiện có, nó sẽ trả về một mảng mới được lọc mỗi lần.

— Diego Venâncio
nguồn

0

Áp dụng cùng một bộ lọc trong HTML với nhiều cột, chỉ ví dụ:

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)

— Amay Kulkarni
nguồn