我想根据下拉菜单中选择的特定值显示/隐藏内容但不起作用。
$scope.list = {
'val1': 'abc',
'val2': 'xyz'
};
$scope.selectedVal = 'val1'
$scope.isEnabled = $scope.selectedVal == 'val1' ? true : false;
html代码
<select ng-model="selectedVal" ng-options="k as v for (k,v) in list"></select>
<div ng-if="isEnabled">
<span>Show Me</span>
</div>
更改选择框时,Show Me未显示/隐藏,有什么不对?
答案 0 :(得分:3)
var app = angular.module('app', []);
app.controller('fCtrl', function($scope) {
$scope.list = {
'val1': 'abc',
'val2': 'xyz'
};
$scope.selectedVal = 'val1'
$scope.$watch('selectedVal', function() {
$scope.isEnabled = $scope.selectedVal == 'val1' ? true : false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl">
<select ng-model="selectedVal" ng-options="k as v for (k,v) in list"></select>
<div ng-if="isEnabled">
<span>Show Me</span>
</div>