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類別選擇器

回答

相關問題