angularjs:使用选定的控件进行过滤

Question

Not Working jsfiddle

你知道为什么过滤不起作用吗？我期望看到忍者猫在控制器中被选中，类似于Working Fiddle。

var app = angular.module( 'catapp', [ 'localytics.directives' ] );

app.directive('petConverter', function() {
    return{
        restrict:'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            ngModel.$formatters.push(function(valueFromModel){
                    var target1 = [];
                    for (var i = 0; i < valueFromModel.length; i++) {
                        target1.push(valueFromModel[i].type);
                    }
                    return target1;
            });
        }
    }
});

app.controller( 'CatController', function ( $scope ) {


    $scope.lol = { cats: [
        'longcat',
        'ninjacat',
        'monorail cat'
    ]};

    $scope.myModel = [{type:'ninjacat'}];

});

Answer 1

指令中的拼写错误很少，我在小提琴中解决了它们，下面是updated fiddle

更新指令代码：

.directive('petConverter', function() {
    return{
        restrict:'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            ngModel.$formatters.push(function(valueFromModel){
                    //add this line
                    ngModel.$setViewValue(valueFromModel[0]);
                    var target1 = [];
                    for (var i = 0; i < valueFromModel.length; i++) {
                        target1.push(valueFromModel[i].type);
                    }
                    return target1;
            });
        }
    }
})

UPDATED FIDDLE