如何使用角度js 1选择具有ng-if条件和ng-repeat的框选项?

时间:2016-12-12 10:15:24

标签: angularjs ionic-framework

选择框内的Angular js1 ng-if不起作用。如何解决这个问题?我将仅在视图页面中显示john的名称,并显示if condition.how。

keyBy()
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.items = [
    {name:"john",
    area:"India"
    }, 
    {name:"Apple",
       area:'US'
    }, 
    {name:"Ravi",
          area:"UK"
     }];
    
    $scope.clicked=function(){
    alert("hello");
    };
});

1 个答案:

答案 0 :(得分:1)

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.items = [
    {name:"john",
    area:"India"
    }, 
    {name:"Apple",
       area:'US'
    }, 
    {name:"Ravi",
          area:"India"
     }];
    $scope.selected={}
    $scope.clicked=function(){
     alert("hello");
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="item in items|filter:{area:'India'}" ng-click="clicked()"   >{{item.name}}</option>
</select>

Better way-
<select ng-options="option.name for option in items|filter:{area:'India'}" ng-model="selected" ng-change="clicked()" >
</select>

</div>

您可以使用过滤器检查ng-repeat来根据区域过滤数据。

如果区域名称是动态的,请相应地更改过滤器。

修改 使用ng-change指令不要点击(查看更改)