angular ng-show式の文字列が期待どおりに動作しない

Question

ng-repeatとng-showの選択に基づいて要素をリストしようとしていますが、ng-showが期待どおりに動作しない理由を理解できません。

function Ctrl($scope) { 
$scope.categories = [ 

{"name": "alpha"}, 
{"name": "beta"}, 
{"name": "gama"} 

]; 
$scope.subcategories = [ 

{"parent": "alpha", 
    "text" : "alpha text"}, 
{"parent": "beta", 
    "text" : "beta text"}, 
{"parent": "gama", 
    "text" : "gama text"} 

]; 
} 

-

<div ng-controller="Ctrl"> 
<div> 
    Categorie: 
    <select id="country" ng-model="categorie"> 
     <option value=''>Select</option> 
     <option ng-repeat="cat in categories" value="{{cat.name}}">{{cat.name}}</option> 
    </select> 
    <p>Selected categorie: {{categorie}} </p> 
</div> 
<div> 
<p ng-repeat="x in subcategories" ng-show="x.parent == 'categorie'"> 
    {{x.text}} 
</p> 
</div> 

Answer 1

これを試してみてください。

<p ng-repeat="x in subcategories" ng-show="x.parent == categorie"> 

ともあなたはこの

<p ng-repeat="x in subcategories | filter:{parent:categorie}" > 

var app = angular.module("app",['angular.filter']) 
 
app.controller('ctrl',['$scope', function($scope){ 
 
     $scope.categories = [ 
 

 
{"name": "alpha"}, 
 
{"name": "beta"}, 
 
{"name": "gama"} 
 

 
]; 
 
$scope.subcategories = [ 
 

 
{"parent": "alpha", 
 
    "text" : "alpha text"}, 
 
{"parent": "beta", 
 
    "text" : "beta text"}, 
 
{"parent": "gama", 
 
    "text" : "gama text"} 
 

 
]; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<div> 
 
    Categorie: 
 
    <select id="country" ng-model="categorie"> 
 
     <option value=''>Select</option> 
 
     <option ng-repeat="cat in categories" value="{{cat.name}}">{{cat.name}}</option> 
 
    </select> 
 
    <p>Selected categorie: {{categorie}} </p> 
 
</div> 
 
<div> 
 
<p ng-repeat="x in subcategories | filter:{parent:categorie}" > 
 
    {{x.text}} 
 
</p> 
 
</div>