Question

我有4个选择框：

    <select class="selectize category"
            ng-options="stepType.id as stepType.title for stepType in filterOptions.stepTypes | orderBy:'title'"
            ng-model="filterSelections.stepType" >
        <option value="">All Steps</option>
    </select>

    <select class="selectize category"
            ng-options="manager.id as manager.title for manager in filterOptions.managers | orderBy:'title'"
            ng-model="filterSelections.manager" >
        <option value="">All Managers</option>
    </select>

    <select class="selectize category"
            ng-options="candidate.id as candidate.title for candidate in filterOptions.candidates | orderBy:'title'"
            ng-model="filterSelections.candidate" >
        <option value="">All Candidates</option>
    </select>

    <select class="selectize category"
            ng-options="position.id as position.title for position in filterOptions.positions | orderBy:'title'"
            ng-model="filterSelections.position" >
        <option value="">All Positions</option>
    </select>

我也有那些观察者：

$scope.$watch('filterSelections.stepType', function(value)
{
    if (value == null) {
        return;
    }

    $scope.filter.step = value;

    $scope.fetch();

},true);

$scope.$watch('filterSelections.manager', function(value)
{
    if (value == null) {
        return;
    }

    $scope.filter.manager = value;

    $scope.fetch();

},true);

$scope.$watch('filterSelections.position', function(value)
{
    if (value == null) {
        return;
    }

    $scope.filter.manager = value;

    $scope.fetch();

},true);

是否可以组合所有3位观察者？

我知道您可以为所有3位观察者使用此语法：

$scope.$watch('[filterSelections.position, filterSelections.manager, ...]', function(value)
{
    if (value == null) {
        return;
    }

    $scope.filter.manager = value;

    $scope.fetch();

},true);

但是，我怎么能从观察者内部知道它是从经理或职位上调来的呢？另外，处理这样一个behvaior的最佳方法是什么？

Answer 1

不要使用$watch - 使用change事件，并传递您需要的内容（选择名称和值）并使其全部使用：

$scope.selectChange = function(name, value) {
    if (value == null) {
        return;
    }

    $scope.filter[name] = value;

    $scope.fetch();
}

和html：

<select class="selectize category"
        ng-options="stepType.id as stepType.title for stepType in filterOptions.stepTypes | orderBy:'title'"
        ng-model="filterSelections.stepType" ng-change="selectChange('stepType', filterSelections.stepType)" >
    <option value="">All Steps</option>
</select>

Answer 2

最好的选择是使用ng-change事件，就像@tymeJV在 Answer 中所说的那样，但如果您非常具体，则需要使用$watch 1}}，试试这个

$scope.filterSelections = {};

$scope.$watch('filterSelections', function(value)
{
    if (value == null) {
        return;
    }

    if (filterSelections.manager)
    {
      $scope.filter.manager = value;
    }
    else if (filterSelections.candidate)
    {
      $scope.filter.candidate= value;
    }
    else if (filterSelections.position)
    {
      $scope.filter.position= value;
    }

    $scope.fetch();

},true);

在angularjs中观察选择更有效率

2 个答案: