0

特定の DOM 要素の可視性を変更するために AngularJs を使用しています。可視性は、ドロップダウンリストで選択された値によって異なります。より具体的には、選択したoptionタグのデータ属性について。既存の ASP.NET コントロールであるため、AngularJs を介してドロップダウンを設定することはできません。

コントローラーでメソッドを使用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.
    };
}

私はこれに間違った方法でアプローチしていますか?

ASP.NET は既にそれを行っているため、AngularJs にデータを入力させることはできないことに注意selectしてください (現時点では変更できません)。

selectedValueまた、 （ポストバックしてデータベースに保存するため）とdata-carType（DOMを変更するため）の両方が必要です。value実行時にトラックの 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-model がそれを処理するため、値を更新するために ng-change は必要ありません。selectedValueng-hide では、単に'Truck' オプション (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 に答える