Question

如何根据数组中的可用选项启用或禁用单选按钮

// 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过滤器，但在我的情况下它没有工作任何人为我提供自定义过滤器。

在这里，字段名称也是动态的。所以如何从json中过滤重复项 here is my working code

Answer 1

编写确定禁用内容的函数的逻辑并不简单（我只试了大约15分钟）最终你可以使用ng-disabled并在数据中的“选项”上设置一个属性，这样它就会得到反映在视图中，如

ng-disabled="d.disabled"
ng-change="checkDisabled()"

在checkDisabled中，您必须运行逻辑以确定哪些选项实际上已添加“禁用”属性以供ng-disabled使用。

另外，要将过滤后的数据保留在范围内，可以使用：

<div ng-repeat="data in data.products | filter:pageNumber as filtered">

然后您将获得带有过滤产品的$scope.filtered。诀窍是你需要通过所有无线电选项，并为每个选项搜索所有产品，看看是否有任何产品与选项值不匹配。如果它匹配任何值，则对该选项禁用= false如果它不匹配任何或过滤产品的值，则它被禁用= true。

angularjs过滤独特的过滤器

1 个答案: