angularjs过滤器独特的过滤器
[英]angularjs filters unique filters
问题描述
How to enable or disable the radio buttons according to available options in the array 
如何根据阵列中的可用选项启用或禁用单选按钮
// Code goes here var app = angular.module('app', ['ui.directives','ui.filters']); app.controller('ctrl', function($scope, $filter,$http) { $scope.pageNumber = {}; $http.get('https://cdn.rawgit.com/rainnaren/20355aea389ba6f7bfb801ecb52774d6/raw/4482a3d9f5a0cc3e73720a11e0e2b60c085519c0/data.json').then(function(data){ $scope.data = data.data; angular.forEach($scope.data.products,function(key,value){ angular.forEach(key.productAttributes,function(k,val){ // console.log(key.productAttributes) // $scope.brandsGroup = uniqueItems(key.productAttributes, val); // console.log($scope.brandsGroup) }) }) }); // var uniqueItems = function (data, key) { // var result = []; // for (var i = 0; i < Object.keys(data).length; i++) { // var value = data[i][key]; // if (result.indexOf(value) === -1) { // result.push(value); // } // } // return result; // }; $scope.$watch(function() { return $scope.pageNumber; }, function() { $scope.v = function(event,d) { var count = Object.keys($scope.pageNumber.productAttributes).length; console.log(count); if ($scope.data.variantAttributeses.length === count) { $scope.x = $filter('filter')($scope.data.products, $scope.pageNumber); } }; }); });
<!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"> </script> <link rel="stylesheet" href="style.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> <script src="script.js"></script> </head> <body ng-controller="ctrl"> {{pageNumber}} <div ng-repeat="d in data.variantAttributeses | unique:d"> {{d.name}} <div> <form ng-repeat="dg in data.products | filter:pageNumber "> <label><input ng-change="v()" type="checkbox" ng-model="pageNumber.productAttributes[d.name]" ng-true-value="'{{dg.productAttributes[d.name] }}'" ng-false-value="''">{{dg.productAttributes[d.name] }}</label> </form> </div> </div> <div> <div ng-repeat="data in x | filter:pageNumber:true"> {{data.brandProductId}} </div> </div> </body> </html>
在这里，唯一的过滤器无法正常工作，我尝试了角度ui过滤器，但解决方案是什么呢？但在我的情况下，任何人都无法为我提供定制过滤器。
in this the field name is also dynamic . 在此字段名称也是动态的。 so how to filter the duplicates from the json here is my working code 所以如何从json过滤重复项是我的工作代码
1 个解决方案
解决方案1
0 2017-11-18 20:42:33
The logic for writing the function that determines what is disabled isn't trivial (I just tried for about 15 minutes) ultimately you can use ng-disabled and set a property on the "option" in the data so that it gets reflected in the view, something like 最终，您可以使用ng-disabled并在数据中的“ option”上设置属性，以便将其反映出来，从而可以轻松地编写确定已禁用内容的函数的逻辑（我刚刚尝试了大约15分钟）。查看，类似
ng-disabled="d.disabled"
ng-change="checkDisabled()"
in the checkDisabled you'd have to run the logic to determine which options actually get the "disabled" attribute added to them for use by ng-disabled here. 在checkDisabled中，您必须运行逻辑以确定哪些选项实际上获得了添加到其中的“ disabled”属性，以供ng-disabled使用。
Also to keep the filtered data on scope can use: 为了使过滤后的数据保持在范围内，可以使用：
<div ng-repeat="data in data.products | filter:pageNumber as filtered">
then you will have a $scope.filtered with the filtered products. 那么您将获得一个$scope.filtered过滤产品。 The trick is you need to go through all radio options and for each one you need to search all products and see if any product doesn't match the option value. 诀窍是您需要仔细检查所有单选选项，并且对于每个选项，都需要搜索所有产品，并查看是否有任何产品与该选件值不匹配。 If it matches any value then disabled for that option =false if it matches no values of any or the filtered products then it's disabled=true. 如果匹配任何值，则对该选项禁用= false，如果不匹配任何值或过滤后的产品，则禁用= true。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.