我有一个下拉菜单，当我将下拉菜单选项更改为city，state时。我正在从json填充值。这里我的要求是，当我在下拉菜单的更改中填充值“ No data”时按钮应该只针对特定值隐藏。这是下面的代码。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-repeat="emp in groups" class="test" ng-attr-id="{{emp[attr]}}">
<p>{{emp[attr]}}<button ng-if="emp[attr]!='No data'" type="button">My button</button></p></div>
<div ng-if="emp[attr]=='No data'">No db found</div>
</div>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [{
title: 'title1',
name: 'name1',
details: 'No data',
id : 1
},
{
title: 'No data',
name: 'name2',
details: 'two',
id : 2
},
{
title: 'title3',
name: 'name2',
details: 'three',
id : 3
}
]
$scope.update = function() {
if ($scope.x == 'city') {
$scope.id = 'city';
$scope.attr = 'details';
}
if ($scope.x == 'state') {
$scope.id = 'state';
$scope.attr = 'title';
}
if ($scope.x == 'country') {
$scope.id = 'country';
$scope.attr = 'name';
}
}
});
答案 0 :(得分：0)
如果您已经知道隐藏数据的条件（在您的情况下为“无数据”），我想ng-if将是最佳解决方案。 您可以在HTML中添加条件
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [{
title: 'title1',
name: 'name1',
details: 'No data',
id: 1
},
{
title: 'title2',
name: 'name2',
details: 'two',
id: 2
},
{
title: 'title3',
name: 'name2',
details: 'three',
id: 3
}
]
$scope.changeCss = function(input) {
if (input === 'No data') {
return {
'color': 'red'
}
}
}
$scope.update = function() {
if ($scope.x == 'city') {
$scope.id = 'city';
$scope.attr = 'details';
}
if ($scope.x == 'state') {
$scope.id = 'state';
$scope.attr = 'title';
}
if ($scope.x == 'country') {
$scope.id = 'country';
$scope.attr = 'name';
}
}
});
app.filter('modifydata', function() {
return function(input) {
if (input && input.length > 0) {
if (input === 'No data')
return 'No db found'
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-repeat="emp in groups" class="test" ng-attr-id="{{emp[attr]}}">
<p ng-style="changeCss(emp[attr])">{{emp[attr] | modifydata}}<button ng-if="emp[attr]!='No data'" type="button">My button</button></p>
<!--place here in the scope of ng-repeat-->
<div ng-if="false" class="error">hello</div>
</div>
<!--<div ng-if="false" class="error">hello</div>-->
</div>
</div>