Сравнение равенства объектов для ввода [радио] с ng-моделью и ng-значением

Ответ 1

Я пишу самую простую директиву. Использование своего рода треков для сопоставления двух разных объектов. См. http://jsfiddle.net/xWWwT/146/.

HTML

<div ng-app="app">
<div ng-app ng-controller="ThingControl">    
    <ul >
        <li ng-repeat="color in colors">
            <input type="radio" name="color" ng-model="$parent.thing" ng-value="color" radio-track-by="name" />{{ color.name }}
        </li>
    </ul>
    Preview: {{ thing }}
</div>
</div>

JS

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

app.controller('ThingControl', function($scope){
    $scope.colors = [
        { name: "White", hex: "#ffffff"},
        { name: "Black", hex: "#000000"},
        { name: "Red", hex: "#000000"},
        { name: "Green", hex: "#000000"}
    ];

    $scope.thing = { name: "White", hex: "#ffffff"};

});

app.directive('radioTrackBy', function(){
return {
        restrict: "A",
        scope: {
            ngModel: "=",
            ngValue: "=",
            radioTrackBy: "@"
        },
        link: function (ng) {   
            if (ng.ngValue[ng.radioTrackBy] === ng.ngModel[ng.radioTrackBy]) {                                
                ng.ngModel = ng.ngValue;
            }
        }
    };
});

Ответ 2

ОК, поэтому после дальнейшего рассмотрения я решил пойти с более "смешанным" подходом, просто заменив директиву ng-model своей собственной настраиваемой директивой. Это очень похоже на подход, который я использовал для создания директивы "checkbox list" на основе этого ответа: fooobar.com/questions/13389/....

.directive('radioOptions', function() {
    // Apply this directive as an attribute to multiple radio inputs. The value of the attribute
    // should be the scope variable/expression which contains the available options for the
    // radio list. Typically, this will be the collection variable in an ng-repeat directive
    // that templates the individual radio inputs which have radio-options applied. In addition,
    // instead of the normal ng-model, use a selected-option attribute set to the same expression.
    // For example, you might use radio-options like this:
    // <label ... ng-repeat="item in collection">
    //     <input type="radio" ... ng-value="item" radio-options="collection" selected-option="myModel.myProperty">
    // </label>
    //
    // See https://stackoverflow.com/questions/19281404/object-equality-comparison-for-inputradio-with-ng-model-and-ng-value
    // for the SO question that inspired this directive.
    return {
        scope: {
            radioOptions: '=',
            selectedOption: '=',
            ngValue: '='
        },
        link: function( scope, elem, attrs ) {
            var modelChanged =  function() {
                if( jQuery.isArray(scope.radioOptions) ) {
                    jQuery.each( scope.radioOptions, function(idx, item) {
                        // This uses our models' custom 'equals' function for comparison, but another application could use
                        // ID propeties, etc.
                        if( typeof item.equals === 'function' && item.equals(scope.selectedOption) ) {
                            elem.prop( 'checked', item === scope.ngValue );
                        }
                    });
                }
            };
            scope.$watch( 'radioOptions', modelChanged );
            scope.$watch( 'selectedOption', modelChanged );
            var viewChanged = function() {
                var checked = elem.prop( 'checked' );
                if( checked ) {
                    scope.selectedOption = scope.ngValue;
                }
            };
            elem.bind( 'change', function() {
                scope.$apply( viewChanged );
            });
        }
    };
});

Ответ 3

Как запрошено OP, здесь приведен пример директива переключателя, которая будет работать со сложными объектами. Он использует underscore.js, чтобы найти выбранный элемент из параметров. Это немного сложнее, чем должно быть, потому что оно также поддерживает загрузку параметров и выбранного значения с помощью вызовов AJAX.

Ответ 4

Почему бы вам просто не использовать идентификатор для этого выбора?

<input type="radio" ng-model="selectedItem" ng-value="item.ID"> {{item.Label}}

А затем вместо selectedItem вы можете написать items[selectedItem].

О, и, играя с вашей проблемой в jsfiddle, я заметил другие вещи:

a.) Вы забыли добавить к вводу атрибут name.

b.) Никогда не используйте что-либо без точки в ng-модели. Если вы действительно пытаетесь вывести selectedItem с {{selectedItem}} вне блока ng-repeat, вы заметите, что значение не обновляется при выборе переключателя. Это связано с тем, что ng-repeat создает собственный охват пользователя.

Ответ 5

Так как я еще не могу добавлять комментарии, я должен ответить здесь. Ответ Даны работал нормально для меня. Хотя я хотел бы указать на то, чтобы использовать его подход, нужно было бы реализовать функцию "равно" на объектах коллекции. Пример ниже:

.controller('ExampleController', ['$scope', function($scope) {
   var eq = function(obj) {
       return this.id === obj.id;
     };
   col = [{id: 1, name: 'pizza', equals: eq}, {id:2, name:'unicorns', equals: eq}, {id:3, name:'robots', equals: eq}];

   $scope.collection = col;
   $scope.my = { favorite : {id:2, name:'unicorns'} };

 }]);

Смотрите ссылку plunker .