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}" >

＆＃13;

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"}

];   
}]);

＆＃13;

<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>

＆＃13;

angular ng-show表达式字符串评估不按预期工作

1 个答案: