Question

您好我正在使用meanjs构建一个小型Web应用程序，我已经设法通过各种教程，书籍等组合一个类别选择器。它应该看起来像ebay类别选择器但我仍然坚持如何显示所选类别。

这是我到目前为止jsfiddle

var app = angular.module('categories', []);
app.controller('MainCtrl', function($scope) {
$scope.choice = null;
$scope.opts = {
    "Basic Materials": {
        "Chemical":{
        "BlahChemicals": ["abc123", "blahblah"],
        "Resources": ["Minerals", "Metals"],
    },
        "Steel":{
        "BlahTin": ["abcsteel", "blahyuck"],
        "Exsteel": ["Minerals", "Metals"],
    },
        "Timber": ["Hardwood", "SoftWood"]
    }

 };
 });

app.directive('catSelect', function($compile, $parse) {
var ddo = {
    restrict: 'E',//only matches element name
    scope: {config:'=config'},
    replace: true,
    controller: function($scope, $attrs, $element) {
        $scope.selected = null; // a place to store the result of this iteration

        // make an selections array to display the current set of keys
        if (angular.isArray($scope.config)) {
            // if it is an array, just copy
            $scope.selections = angular.copy($scope.config);
        } else if (angular.isObject($scope.config)) {
            $scope.selections = [];
            //if it is an object, extract the key's to an array
            angular.forEach($scope.config, function(cat, key) {
                $scope.selections.push(key);
            });
        }

        $scope.$watch("selected", function(newCat, oldCat) {
            if (newCat === oldCat || newCat === null) {return; } //nothing to do.
            $scope.sub = $scope.config[newCat]; //make the current selection the root for the next
            if ($scope.sub && angular.isObject($scope.sub)) { // is there an subselection to make?
                $element.find("span").remove(); //remove previous added selects..
                newSelect = '<cat-select config="sub" class="catSelectSubItem"></cat-select>';
                $element.append($compile(newSelect)($scope));
            }
        });


    },
    template: '<span><select ng-model="selected" ng-options="cat for cat in selections"></span>',

};
return ddo;
});

CSS

  select {
    display: inline;
    margin-left: 0;
    float: left;
    height: 260px;
    margin-left: 15px;
    background: #FFF;
    min-width: 15.0em;
    }

HTML

<!DOCTYPE html>
 <html ng-app="categories">
  <head>
   <meta charset="utf-8" />
    <title>AngularJS Categories</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" data-semver="1.0.8">     </script>
  <script src="app.js"></script>
 </head>
  <body ng-controller="MainCtrl">
   <div>
       <cat-select config="opts"></cat-select>
   </div>
  </body>
 </html>

所以运气好的话，有人可以指出我正确的方向

Answer 1

为了检索多个选定的类别，您必须以某种方式跟踪它们。

我能够对你的jsFiddle进行快速编辑，因此它将选定的选项存储在一个数组中并在HTML上显示...然后你可以在你的控制器上使用它来做你需要的任何事情。

它可能会使用更多的优化和防御性编码，但我想你可以自己做：）

这是小提琴，希望有所帮助： http://jsfiddle.net/j8bq7rm1/1/

  <div style="display: block;">{{selectedCategories}}</div>
  <div>
      <cat-select config="opts" selected-items="selectedCategories"></cat-select>
  </div>

由于

Angularjs类别选择器

1 个答案: