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

104

Nếu tôi có một mảng đối tượng và tôi muốn ràng buộc mô hình Góc thành thuộc tính của một trong các thành phần 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 tốt hơn với một ví dụ cụ thể:Làm cách nào để lọc một mảng với AngularJS và sử dụng thuộc tính của đối tượng đã lọc làm thuộc tính ng-model?

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 đến chủ đề với một lớp 'C', nhưng tôi không muốn ràng buộc mô hình với lớp lớp; Tôi muốn liên kết nó với tiêu đề của chủ thể có cấp 'C'.

Điều này có thể thực hiện được không và nếu có thì làm thế nào?

Nguồn

2013-07-30 Bernhard Hofmann

103

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

Nguồn

2013-07-30 11:50:50

tôi nhìn thấy nơi bạn đang đi với điều đó, nhưng tôi thực sự không muốn có một repeater. Thuộc tính tôi thực sự sẽ lọc theo 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. –

đây là hướng dẫn cho người Ý :) http://dev.stasbranger.com/post/77190983049/lista-di-filtri-in-angularjs –

điều này rất hữu ích và ngược lại (mọi thứ khác với C), điều này sẽ hoạt động: 'filter: {grade: '!' + 'C'}' – pulkitsinghal

140

Bạn có thể sử dụng bộ lọc "bộ lọc" trong bộ điều khiển để nhận được tất 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 tiêu đề của chủ thể có cấp "C".

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

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

Cùng với ES6 đồng bằng:

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

Nguồn

2013-07-30 13:00:16 Oliver

tôi xin lỗi tôi không tuân theo bộ lọc thứ hai ('bộ lọc') bạn có thể giải thích thêm một chút nữa không? – Winnemucca

@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 bởi vì nó lọc một mảng. Nó sẽ giống như thế này với bộ lọc tiền tệ: $ filter ('currency') (số lượng, ký hiệu, fractionSize) Kiểm tra tài liệu ở đây: https://docs.angularjs.org/api/ng/filter – Oliver

Đây là một JSBin sửa đổi với một mẫu làm việc:

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

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

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

Nguồn

2014-04-30 11:49:23 lukeatdesignworks

Điều này nên là câu trả lời được chấp nhận. –

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

nếu bạn muốn tạo ra một danh sách riêng biệt của kết quả 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 khảo failedSubjects giống như cách bạn sẽ tham khảo các kết quả đối tượng

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

kể từ khi câu trả lời này góc đã cập nhật các tài liệu bây giờ họ đề nghị kêu gọi các bộ lọc

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

Nguồn

2014-11-19 00:27:07 Kieran

filterFilter là gì? nó là bất kỳ dịch vụ hoặc chỉ thị nào? codeFilter ở đâ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 tin scripts.js) – Kieran

mặc dù họ đã thay đổi bộ lọc tài liệuFilter vẫn hoạt động .. – Kieran

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

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

Nguồn

2017-02-03 21:50:56 Nelu

xin lưu ý, nếu bạn sử dụng $ filter như sau:

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

và bạn tình cờ có một cấp độ khác, Oh I dunno, CC hoặc AC hoặc C + hoặc CCC mà nó sẽ kéo chúng vào. bạn cần phải 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);

Đây thực sự giết chết tôi khi tôi đang kéo trong 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 trong cho một lỗi bởi vì nó là kéo hoa hồng ID 56 thay vì 6.

Thêm lực lượng thực sự phù hợp chính xác.

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

Tuy nhiên, vẫn còn, tôi thích điều này (tôi sử dụng nguyên cảo, vì thế mà "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 số điểm xuống đường, tôi có thể muốn để có thêm một số thông tin từ dữ liệu được lọc đó, v.v ... có chức năng đúng trong đó có loại lá chắn mở.

Nguồn

2017-03-23 20:12:29

Tôi đã có lỗi tương tự như bạn, nhờ gợi ý với tham số boolean thứ ba. Đã không nhận thức được nó. –

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

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

Nguồn

2018-01-11 09:52:04

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

Trả lời

Các vấn đề liên quan