Angularjs类别选择器

你好我正在使用meanjs构建一个小型web应用程序，我已经设法通过各种教程，书籍等将类别选择器放在一起它应该看起来像ebay类别选择器，但我坚持如何显示选定的类别。Angularjs类别选择器

这是我迄今为止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="[email protected]" 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>

所以，如果幸运的话有人在那里将能指出我在正确的方向

来源

2014-09-26 sibkis

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

我能够对jsFiddle进行快速编辑，以便将选定的选项存储在数组中并显示在HTML上......然后，您可以在控制器上使用它来执行任何您需要的操作。

它可能会使用一些更优化和防御性编码，但我想你可以自己做:)

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

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

感谢

来源

2014-09-28 15:12:19 Fedaykin

Angularjs类别选择器

回答

相关问题