将数据属性从DOM传递到AngularJS控制器中的函数_Dom_Controller_Angularjs_Custom Data Attribute

将数据属性从DOM传递到AngularJS控制器中的函数

dom angularjs

将数据属性从DOM传递到AngularJS控制器中的函数,dom,controller,angularjs,custom-data-attribute,Dom,Controller,Angularjs,Custom Data Attribute,我使用AngularJs来更改某些DOM元素的可见性。可见性取决于在dropdownlist中选择的值。更具体地说，在所选选项标记的数据属性上。我无法通过AngularJs填充下拉列表，因为它是一个现有的ASP.NET控件我考虑使用ngchange并在我的控制器上调用一个方法，但我必须传递一个参数。此参数在DOM中，而不是在我的控制器中。显然，我希望保持这种方式，而不是访问控制器中的DOM 我做了一个测试，但这是我的代码： HTML <body ng-app> <di

我使用AngularJs来更改某些DOM元素的可见性。可见性取决于在dropdownlist中选择的值。更具体地说，在所选

选项

标记的数据属性上。我无法通过AngularJs填充下拉列表，因为它是一个现有的ASP.NET控件

我考虑使用

ngchange

并在我的控制器上调用一个方法，但我必须传递一个参数。此参数在DOM中，而不是在我的控制器中。显然，我希望保持这种方式，而不是访问控制器中的DOM

我做了一个测试，但这是我的代码：

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>

我是不是走错了路

请记住，我不能让AngularJs填充

select

，因为ASP.NET已经为我完成了这项工作（目前我无法更改）

此外，我还需要

selectedValue

（用于回发并将其保存到数据库）和

数据类型（用于更改DOM）。我不知道在运行时卡车选项的id（或值
）是什么。
您不需要更改ng来更新该值，因为ng模型会处理该问题。在ng hide中，您只需将selectedValue
与“Truck”选项（int 3）的值进行比较：

汽车1
汽车2
卡车
如果选择了卡车，则隐藏。

您不需要更改ng来更新值，因为ng模型会处理这个问题。在ng hide中，您只需将selectedValue
与“Truck”选项（int 3）的值进行比较：

汽车1
汽车2
卡车
如果选择了卡车，则隐藏。

使用指令创建车辆类型的对象，并观察选择的型号值，以更新isTruck
变量：
HTML:
演示：
使用指令创建车辆类型的对象，并查看选择的型号值，以更新isTruck
变量：
HTML:
演示：不行。我编辑了我的问题以澄清问题，但在运行时，我不知道卡车的值是3。我无能为力。我编辑了我的问题以澄清问题，但在运行时，我不知道Truck的值是3。最后，我使用了KnockoutJs，但您的解决方案运行良好。最后，我使用了KnockoutJs，但您的解决方案运行良好。
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.
    };
}

<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>

 <select ng-model="selectedValue" check-is-truck>

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;
}