输入[无线电]与ng模型和ng值的对象相等性比较

我写了一个最简单的指令。使用一种"跟踪"来映射两个不同的对象。请参阅 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;
            }
        }
    };
});

好的，所以经过进一步的审查，我决定采用一种更"混合"的方法，本质上只是用我自己的自定义指令替换ng-model指令。这与我用于基于以下答案制作"复选框列表"指令的方法非常相似：https://stackoverflow.com/a/14519881/561604。

.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 );
            });
        }
    };
});

根据 OP 的要求，下面是一个适用于复杂对象的示例单选按钮指令。它使用下划线.js从选项中查找所选项目。它比它应该的要复杂一些，因为它还支持使用 AJAX 调用加载选项和所选值。

你为什么不像这样直接使用 ID 进行选择？

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

然后，您可以编写items[selectedItem]而不是使用selectedItem.

哦，在jsfiddle中处理您的问题时，我注意到了其他事情：

a.(您忘记向输入添加name属性。

b.(永远不要在ng模型中使用没有点的东西。如果您实际尝试输出 selectedItem {{selectedItem}}在 ng-repeat 块之外，您会注意到当您选择单选按钮时，该值不会更新。这是由于ng-repeat创建自己的子范围。

由于我还不能添加评论，所以我必须在这里回复。达娜的回答对我来说还行。虽然我想指出为了使用他的方法，但必须在集合中的对象上实现"equals"函数。请参阅以下示例：

.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'} };
 }]);

请参阅链接。