web-dev-qa-db-ja.com

anglejsにoptgroupsを追加するのは難しいことを証明しています

私はangularjsを使用していますが、他の作業をしながら過去2日間、optgroupを作成しようとしていて、困惑しています。 ng-optionsを作成する必要がありましたが、必要だと気付くまでoptgroupを検討しませんでした。 ng-optionsを使用して追加しようとしましたが、完全に無視するか、コードを台無しにするか、オプションを完全に無視します。

実際に（ダブル）アンパサンドを使用できるかどうかわからなかったので、両方のngオプションを組み合わせてみましたが、役に立ちませんでした。さらに、odetocodeにある特定のコードをいじってみました（これは有望に見えましたが、構造が限られているため、コードに組み込むことができませんでした）。

私が試したすべてが私のコードを壊します。元のコードは以下にあります（他の多くのmodのほとんどの前のコード）が、私はそれのためのプランカーも持っています：

http://plnkr.co/edit/xCLe2GFShUMUlIySPLH9?p=info

[〜＃〜] html [〜＃〜]

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>


  <form name="FORM" ng-controller="appController">
<the-ratings  model="review.ratings">         
</the-ratings>
</form>

  </body>

</html>

[〜＃〜] js [〜＃〜]

(function(){

var app = angular.module('myApp',[]);

app.controller('appController', ['$scope', function($scope) {
      $scope.review = {};
      $scope.review.ratings = '5 stars';
  }])
  app.directive('theRatings', function() {

    return {
      restrict: 'E',
      scope: { model: '=' },
      template: '<select ng-model="model" ng-options="option.name as option.value for option in options"></select>',
      controller: function($scope) {
        $scope.options = [
            { name:'test', namegroup: 'Rate the product', value:'test2',valueName: 'NA' },
            { name: '1 star', value: '1 star' }, 
            { name: '2 stars', value: '2 stars' }, 
            { name: '3 stars', value: '3 stars' },
            { name: '4 stars', value: '4 stars' },
            { name: '5 stars', value: '5 stars' }
        ];
      }

    };
  });


})();
angularjsoptgroup
16
user54600

何でグループ化するかわからないので、プロパティtypeを追加しました。

構文：

ng-options="option.name as option.value group by option.type for option in options"

DEMO

27
charlietfl

AngularJS docs にこの良い例があります。オプションの属性でグループ化する場合は、「groupby」句を追加できます。例えば。：

$scope.options = [
  { name:'test', namegroup: 'Rate the product', value:'test2',valueName: 'NA' },
  { type: 'one', name: '1 star', value: '1 star' }, 
  { type: 'one', name: '2 stars', value: '2 stars' }, 
  { type: 'two', name: '3 stars', value: '3 stars' },
  { type: 'two', name: '4 stars', value: '4 stars' },
  { type: 'two', name: '5 stars', value: '5 stars' }
];

および次のng-options：

"option.name as option.value group by option.type for option in options"
5
zetetic