Question

所以我似乎无法弄明白这一点。基本上，我正在构建一个由选项组成的指令，我想在指令中定义这些选项，但是在我的控制器中定义默认选项。它似乎渲染正常，但未选择默认选项。任何提示？这是Plunkr

    angular.module('app', [])
  .controller('Ctrl', function ($scope) {
    $scope.defaultSearchRange = 3;  
  })
  .directive('dateRange', function () {
    return {
      restrict: 'A',
      scope: {
        searchRange: '='
      },
      replace: true,
      template: '<div><select ng-model="searchRange"><option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option></select></div>',
      controller: function ($scope) {
        $scope.options = [
            { name: '',             value: 0 },
            { name: 'Today',        value: 1 },
            { name: 'Yesterday',    value: 2 },
            { name: 'Last 7 Days',  value: 3 },
            { name: 'Last 30 Days', value: 4 },
            { name: 'Month to Date',value: 5 },
            { name: 'Year to Date', value: 6 }
        ]
      }
    }
  })

Answer 1

您无法设置默认设置，因为默认情况下ng-repeat不会考虑ng-model。

Here is a forked plunker正在发挥作用。

我建议使用ng-options代替ng-repeat。 track by变体将允许您设置所选值。它必须采用相同的“对象格式”才能工作。

以下是修改后的代码：

angular.module('app', [])
  .controller('Ctrl', function ($scope) {
    $scope.defaultSearchRange = 3;
  })
  .directive('dateRange', function () {
    return {
      restrict: 'A',
      scope: {
        searchRange: '='
      },
      replace: true,
      template: '<div><select ng-model="selected" ng-options="o.name for o in options track by o.value"></select></div>',
      link: function (scope) {

        scope.selected = { value: scope.searchRange };

        scope.$watch('selected', function(selected) {

          scope.searchRange = selected.value;
        });

        scope.options = [
            { name: '',             value: 0 },
            { name: 'Today',        value: 1 },
            { name: 'Yesterday',    value: 2 },
            { name: 'Last 7 Days',  value: 3 },
            { name: 'Last 30 Days', value: 4 },
            { name: 'Month to Date',value: 5 },
            { name: 'Year to Date', value: 6 }
        ];
      }
    }
  })

注意：上面的代码映射到新的指令范围属性selected。如果控制器想要传递一个对象而不是一个只是数字值，那么就没有必要。由于值已映射，我们必须$watch然后将实际选定的值映射回来。

在指令中使用ng-model和ng-repeat

1 个答案: