6


select 要素のオプションのテンプレートをオンザフライで変更しようとしています。これが私がやろうとしていることです。選択オプションがあり、ユーザーは学生を選択するときに見たい情報の種類を選択できます。ユーザーが「基本」を選択した場合、Student クラスの Id プロパティと Name プロパティのみを表示します。ユーザーが「詳細」を選択すると、ID、名前、グレードが表示されます。現在の実装は

<!DOCTYPE html>
<html ng-app>
<head>
    <title></title>
    <script type="text/ng-template" id="Basic">
        <select ng-model="selectedItem">
        <option ng-repeat="student in Students">
           {{student.Id}} - {{student.Name}}
        </option>
        </select>
    </script>
     <script type="text/ng-template" id="Detail">
        <select ng-model="selectedItem">
        <option ng-repeat="student in Students">
           {{student.Id}} - {{student.Name}} -- {{student.Grade}}
        </option>
        </select>
    </script>
</head>
    <body>
        <div ng-controller="TemplateCtrl">
            Details Level: <select ng-model="detailLevel" ng-options="c.Id for c in Details"></select>
            <div ng-include="detailLevel.Id"></div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
        <script src="Scripts/TemplateCtrl.js"></script>
    </body>
</html>


ご覧のとおり、ng-template 'Basic' と 'Detail' の両方でコードを複製しています。最初は次のようなことを試していました

<script type="text/ng-template" id="Basic">
           {{student.Id}} - {{student.Name}}
    </script>
<script type="text/ng-template" id="Detail">
           {{student.Id}} - {{student.Name}} -- {{student.Grade}}
    </script>


しかし、サイドタグで ng-include をしようとすると、ブラウザが気に入らなかった。ここで単純なものが欠けている可能性があります。ここで重複したコードの臭いを作成するために間違っていることは何ですか? ありがとう、

4

1 に答える 1

3

テンプレートの代わりにng-switch ディレクティブを使用してみてください。次に、以下が機能するはずです。

<!DOCTYPE html>
<html ng-app>
<head>
    <title></title>
</head>
    <body>
        <div ng-controller="TemplateCtrl">
            Details Level: <select ng-model="detailLevel" ng-options="c.Id for c in Details"></select>
            <div ng-switch="detailLevel">
                <div ng-switch-when="Basic">
                    <select ng-model="selectedItem">
                        <option ng-repeat="student in Students">{{student.Id}} - {{student.Name}}</option>
                    </select>
                </div>
                <div ng-switch-when="Detail">
                    <select ng-model="selectedItem">
                        <option ng-repeat="student in Students">{{student.Id}} - {{student.Name}} -- {{student.Grade}}</option>
                    </select>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
        <script src="Scripts/TemplateCtrl.js"></script>
    </body>
</html>
于 2013-04-08T13:11:38.323 に答える