Question

基本上，我有一个指令，用作使用单选按钮的3路滤波器。不幸的是，它需要有一个默认状态，并且默认状态必须实际显示在UI中，问题是尽管模型已正确更新，但UI却不是。这是一个演示问题的傻瓜：

http://plnkr.co/edit/8pljDFyRfInI4Q0qSTmL?p=preview

该指令使用以下方式：

<filter model="model"/>

模型在控制器中定义为this.model = { value: {} }

Answer 1

这是更新的代码。首先，我想说明ng-model指令仅适用于输入元素

我还将isActive: 'Yes/No'更改为true/false

// Code goes here

var filters = angular.module('filters', ['ui.bootstrap']);

filters.controller('FilterCtrl', function() {
  this.model = { value: {} };
});

filters.directive('filter', function () {
    return  {
        restrict: 'E',
        scope: {
            model: '='
        },
        template: '<div class="btn-group">' +
                    '<label ng-repeat="choice in choices" class="btn btn-{{ choice.buttonClass }}" ng-class="{active: choice.value.isActive}"' +

                           'btn-radio="{{ choice.value }}"><i class="fa {{ choice.icon }}"></i>&nbsp;{{ choice.name }}</label>' +
                   '</div>',
        link: function (scope, element, attrs) {
            scope.choices = [
                { value: { isActive: true }, name: 'Active', buttonClass: 'default', icon: 'fa-circle' },
                { value: null, name: 'Both', buttonClass: 'primary', icon: 'fa-arrows-h' },
                { value: { isActive: false}, name: 'Inactive', buttonClass: 'danger', icon: 'fa-circle-o' },
            ];

            scope.model.value = _.first(_.filter(scope.choices, { value: { isActive: 'Yes' } })).value;
        }
    }
});

带有ng-repeat的指令内的Angular UI Bootstrap单选按钮不能正确显示默认值

1 个答案: