0

我正在使用 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）。我在运行时不知道valueTruck 的 id （或 ）option是什么。

4

2 回答 2

3

使用指令创建车辆类型的对象并观察模型值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;
}

演示：http: //jsfiddle.net/7ttr6/2/

于 2013-03-11T15:10:12.717 回答
0

您不需要 ng-change 来更新值，因为 ng-model 会处理这个问题。在 ng-hide 中，您只需将selectedValue与“卡车”选项（int 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>

小提琴

于 2013-03-11T14:09:33.697 回答