Question

我无法在select select html bloc中检索所选选项（ng-model = filter）的实际值。

请注意，如果我没有设置$ scope.filter，那么即使我在下拉列表中选择了一个选项，$ scope.filter也会保持未定义。

我的html模板，filters.html：

<div ng-if="!showFilterTemplatePlz"> <button class="btn btn-primary" ng-click="showFilterTemplate()" type="button">Add Filter</button> </div> <div ng-if="showFilterTemplatePlz" class="inline"> <button class="btn btn-primary" ng-click="closeFilters()" type="button">Close filters</button> <label>filters</label> <select ng-model="filter" ng-options="filter.name for filter in filterOptions" class="form-control"> </select> <p>{{filter.name}}</p> <button ng-click="addFilter()" id="addFilterButton" class="btn btn-primary btn-sm btn-default" type="button"><i class="fa fa-plus"></i> Add</button> </div>

在我的指示中：

      .directive('filters', ['retrieveStaticDatasService','usersService', function(datasService, usersService) {
        return {
            restrict: 'E',
            scope: false,
            controller: function ($scope) {
                /* init */
                $scope.filterOptions = [
                    {name: "languages"},
                    {name: "nationality"},
                    {name: "location"}
                ];
                $scope.filter = $scope.filterOptions[0];
                /* end init */
                $scope.showFilterTemplate = function(){
                      $scope.showFilterTemplatePlz=true;
                }
                $scope.closeFilters = function(){
                    $scope.showFilterTemplatePlz=false;
                }
                $scope.addFilter = function(){
                    console.log("filter to add : " + $scope.filter.name);                        
                }
            },
            templateUrl: '/partials/components/filters.html'
        }
    }])

结果：

我可以看到实际值出现在我的html中，但我将始终在我的控制台中显示$ scope.filter.name的“语言”，无论我选择哪个选项！我用截图给你看：http://hpics.li/4a37ae3

感谢您的帮助。

[编辑：我做了一些测试，我的模型只有在不在“<div ng-if="..."></div>”内时才会被设置和更新。是否不允许将ng-if直接放在指令中？

回答：Angularjs ng-model doesn't work inside ng-if

Answer 1

我找到了解决方案，问题是ng-if创建了一个子范围。所以我在

中将过滤器更改为 $ parent.filter

 <select ng-model="$parent.filter" ng-options="option.name for option in filterOptions" class="form-control">
      </select>

Answer 2

我认为你对名为'filter'的对象感到困惑。您可能会覆盖ng-options对象而不是控制器对象。

尝试更改为

<select ng-model="filter" ng-options="option.name for option in filterOptions" class="form-control"></select>
<p>{{filter.name}}</p>
<button ng-click="addFilter()" id="addFilterButton" class="btn btn-primary btn-sm btn-default" type="button"><i class="fa fa-plus"></i> Add</button>

ng-model未在ng-if中更新

2 个答案: