我正在使用AngularJs来更改某些DOM元素的可见性。可见性取决于在下拉列表中选择的值。更具体地说，在所选option标签的数据属性上。我无法通过AngularJs填充下拉列表，因为它是现有的ASP.NET控件。
我曾考虑过使用ng-change并在控制器上调用方法，但我必须传递一个参数。此参数在DOM中，而不在我的控制器中。显然，我想保持这种方式，而不是在控制器中访问DOM。
我做了一个jsFiddle，但这是我的代码：
HTML
<body ng-app>
<div ng-controller="VehicleDetailsCtrl">
<select ng-model="selectedValue" ng-change="update()">
<option value="1" data-carType="Car">Car 1</option>
<option value="2" data-carType="Car">Car 2</option>
<option value="3" data-carType="Truck">Truck</option>
</select>
<div ng-hide="isTruck">
Hide if a truck was selected.
</div>
</div>
</body>
Javascript
function VehicleDetailsCtrl($scope) {
$scope.isTruck = false;
$scope.selectedValue = null;
$scope.update = function() {
$scope.isTruck = !$scope.isTruck;
// hide div here?
// but then I'd need to know the selected option,
// but I don't want to reference the DOM here.
};
}
我是否以错误的方式处理此问题？
请记住，我不能让AngularJs填充select，因为ASP.NET已经为我做到了这一点（并且目前我无法更改）。
此外，我同时需要selectedValue（用于回发并将其保存到数据库）和data-carType（用于更改DOM）。我在运行时不知道卡车value的ID（或option）是什么。
使用指令创建车辆类型的对象并查看select的模型值以更新isTruck变量：
HTML：
<select ng-model="selectedValue" check-is-truck>
JS：
var app = angular.module('myApp', []);
app.directive('checkIsTruck', function(){
return function(scope, element, attrs){
scope.vehicleTypes = {};
scope.selectedType = false;
angular.forEach(element.find('option'), function(item, idx) {
scope.vehicleTypes[item.value] = item.dataset.cartype;
});
scope.$watch('selectedValue', function() {
scope.selectedType=scope.vehicleTypes[scope.selectedValue];
scope.isTruck = scope.selectedType == 'Truck'
})
};
})
function VehicleDetailsCtrl($scope) {
$scope.isTruck = false;
$scope.selectedValue = null;
}
您不需要ng-change来更新值，因为ng-model会解决这个问题。在ng-hide中，您只需将selectedValue与“卡车”选项的值（整数3）进行比较：
<select ng-model="selectedValue">
<option value="1" data-carType="Car">Car 1</option>
<option value="2" data-carType="Car">Car 2</option>
<option value="3" data-carType="Truck">Truck</option>
</select>
<div ng-hide="selectedValue==3">
Hide if a truck was selected.
</div>