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

Using ng-model and ng-repeat within a directive

本文关键字：ng-model ng-repeat 指令      更新时间：2023-09-26

所以我似乎不太清楚这一点。基本上，我正在构建一个由选项组成的指令，我想在指令中定义这些选项，但在控制器中定义默认选项。它似乎呈现良好，但未选择默认选项。有什么提示吗？这是普伦克

尔 
    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 }
        ]
      }
    }
  })

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

这是一个正在工作的分叉式 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然后将实际选定的值映射回去。

相关文章：