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
问题：
自定义选择控件最初会填充类型为“Front”的项目，如果我将 Rear 设为默认值，也会填充“Rear”。
但是，在单选按钮之间切换时，不会调用监视功能，并且选择不会填充满足新选择的过滤器类型的项目。
///////////////////////////////////////// //// 缩小问题范围： ////////////////////////////////// ////////////
将其移至独立项目时，我发现上面的代码有效:-(
这是原始的 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"
如果我采用指令“name-value-select”并将其移动到父页面，而不是包含语句，它就可以工作。
但这不是我想要的。所以我需要把它留在包含页面中。
但是，如果我使用ng-model="$parent.selectedFrontAxle"并将其添加到包含页面上的任何元素，则没有任何效果。
任何没有ng-model="$parent.selectedFrontAxle"，仍然没有任何作用。
我可以看到问题是范围，但我不知道如何纠正它。
啊！！！仍然没有解决办法。
//
//
////////////////////////////////////// //////////////
马克·拉杰科克
/////////////////////////// //////////////////////////
一如既往地感谢您的帮助。虽然，当我说我有希望代码进行预过滤而不是用户的情况时，我认为我没有明确说明第 2 点。不过我想通了。因此，对于希望通过指令抽象出控件的任何人，并且在这种情况下，过滤过程由用户和代码执行，这里是 plunker 解决方案：