HTML:
Filter:
<input type="radio" ng-model="Type" value="Rear"> Rear
<input type="radio" ng-model="Type" value="Front"> Front
<br>
Select:
<name-value-select entry="entry" field="axleType" options="filterTypes"></name-value-select>
指令：
.directive('nameValueSelect', function () {
return {
restrict: "E",
scope: {
entry: "=",
field: "@",
options: "=",
onInputChange: "&"
},
controller: function ($scope) {
$scope.onChange = function () {
console.log("selected changed");
$scope.entry.type = $scope.option.value;
$scope.onInputChange();
};
var getItemForValue = function (value) {
var item = null;
$scope.options.forEach(function (_option) {
if (_option.value == value) {
item = _option;
}
});
return item;
};
$scope.$watch("entry", function () {
console.log("entry changed");
$scope.option = getItemForValue($scope.entry[$scope.field]);
}, true);
},
template: '<select ng-model="option" ng-options="o.Description for o in options" ng-change="onChange()"><option value="" selected="selected">Please Select </option></select>'
}; })
コントローラ：
$scope.Description = '';
$scope.entry = {Description: ''};
$scope.Type = 'Front';
$scope.entry.type = '';
$scope.$watch('Type', function (Type) {
$scope.filterTypes = [];
$scope.axleTypes = new API.GetAxleTypes(function () {
angular.forEach($scope.axleTypes, function(axleType) {
if (axleType.Type == Type) {
this.push(axleType);
}
// if(!$scope.$$phase) $scope.$digest(); // tried this, does not have any affect
}, $scope.filterTypes); // '}, $scope.filterTypes, true)'--> did nothing for me here
});
$scope.filterTypes.sort(function (a, b) {
return a.Description.localeCompare(b.Description);
});
}); // '}, true)' --> did nothing for me here
問題：
カスタム選択コントロールは、最初にタイプ「フロント」のアイテムを取り込みます。リアをデフォルトにすると、「リア」も取り込まれます。
ただし、ラジオ ボタンを切り替えると、watch 関数は呼び出されず、select は新しく選択されたフィルター タイプを満たすアイテムを取り込みません。
/////////////////////////////////////////////// //// 問題を絞り込みました: /////////////////////////////////////// ////////////
これをスタンドアロン プロジェクトに移動すると、上記のコードが機能することがわかりました :-(
カスタム ディレクティブとしての元の select NOT は次のとおりです。
<select ng-model="$parent.selectedFrontAxle" ng-options="axleType.Description for axleType in axleTypes | filterByType: 'Front' | orderBy:'Description'" id="frontAxles" class="formRequire" required>
<option value="" selected>Select Axle Type ..</option>
</select>
カスタム ディレクティブとしての選択コントロールは次のとおりです。
<name-value-select entry="entry" field="axleType" options="filterTypes"></name-value-select>
明らかにこれが問題です: "ng-model="$parent.selectedFrontAxle"
include ステートメントの代わりに、ディレクティブ「name-value-select」を親ページに移動すると、機能します。
しかし、それは私が望むものではありません。したがって、インクルードページに残す必要があります。
しかし、ng-model="$parent.selectedFrontAxle"を取得してインクルード ページの任意の要素に追加しても、何も機能しません。
ng-model="$parent.selectedFrontAxle"がない場合でも、何も機能しません。
問題がスコープであることはわかりますが、修正方法はわかりません。
うーん!!! まだ解決策はありません。
//
//
/////////////////////////////////////////////////////////////////////// ////////////////
マーク・ライコック
////////////////////////////// /////////////////////////////
いつもお世話になっております。ただし、ユーザーではなくコードを事前にフィルター処理するシナリオがあると言ったときに、ポイント 2 について明確にしたとは思いません。私はそれを理解しました。したがって、ディレクティブを介してコントロールを抽象化しようとしている人、およびこの場合のように、フィルタリング プロセスがユーザーとコードの両方で実行される場合は、プランカー ソリューションを次に示します。