AngularJS 玩弄手札 巢狀 ngRepeat + filter

一般的 filter 範例都長這樣

    <div ng-app>

        <div ng-controller="GagMangaCtrl">

            search.Name:<input type="text" ng-model="search.name" />

            search.Say:<input type="text" ng-model="search.say" />

            search.$:<input type="text" ng-model="search.$" />

            <table>

                <tr ng-repeat="member in GagManga.members | filter:search">

                    <td>{{member.name}}</td>

                    <td>{{member.say}}</td>

                </tr>

            </table>

        </div>

    </div>

    <script src="Scripts/angular.min.js"></script>

    <script>

        function GagMangaCtrl($scope) {

            $scope.GagManga = {

                members: [

                    { name: '熊吉', say: '我也只不過是被大三角板玩弄於股掌之間的一名犧牲者' },

                    { name: '兔美', say: '比起推理我更喜歡報警' },

                    { name: '聖德太子', say: '閉嘴，我聖德太子的字典裡沒有自作自受這個詞！' },

                    { name: '小野妹子', say: '你這字典也太個人主義了吧' },

                    { name: '悟空：', say: '這就是天竺麼？不給力啊，老濕~ ' },

                    { name: '三藏', say: '你們太大意了，蠢材！！擦！！擦！！ ' },

                    { name: '河合曾良', say: '您是巴嘎麼 芭蕉桑' },

                    { name: '松尾芭蕉', say: '不是巴嘎 是芭蕉' }

                ]

            };

        };

    </script>

但是如果來源不是 使用者輸入 而是巢狀 ngRepeat 的某個父元素 要 filter 某個子元素呢

    <div ng-app="app" ng-controller="myCtrl" class="well-small">

        <fieldset ng-repeat="degree in degrees">

            <legend>{{degree.Degree}}</legend>

            <span ng-repeat="toxic in toxics | filter : { Degree: degree.ID }" class="alert span3">

                Name: {{toxic.Name}}<br />

                Scientific: {{toxic.Scientific}}

            </span>

        </fieldset>

    </div>

    <script src="Scripts/angular.min.js"></script>

    <script>

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

        app.controller('myCtrl', function ($scope) {

            $scope.degrees = [

                {

                    ID: 0,

                    Degree: 'Mild',

                    IsDeadly: false

                },

                {

                    ID: 1,

                    Degree: 'Moderate',

                    IsDeadly: false

                },

                {

                    ID: 2,

                    Degree: 'Severe',

                    IsDeadly: true

                }

            ];

            $scope.toxics = [

                {

                    ID: 1,

                    Name: "毒澱粉",

                    Scientific: "順丁烯二酸",

                    Degree: 0

                },

                {

                    ID: 2,

                    Name: "毒奶粉",

                    Scientific: "三聚氰胺",

                    Degree: 1

                },

                {

                    ID: 3,

                    Name: "瘦肉精",

                    Scientific: "乙型交感神經受體致效劑",

                    Degree: 0

                },

                {

                    ID: 3,

                    Name: "塑化劑",

                    Scientific: "鄰苯二甲酸酯",

                    Degree: 1

                },

                {

                    ID: 5,

                    Name: "丁丁汁",

                    Scientific: "甲基環丙烷",

                    Degree: 2

                }

            ];

        });

    </script>