AngularJS ng-model和ng-checked单选按钮滑块

Question

I'm trying to update an ng-model when a radio button is checked. Although my radio buttons are actually images and my radio buttons are being updated by a function using arrows to cycle through them.

For some reason my $scope.transaction only updates when I actually click the image rather than changing the image using the arrows. Any idea why?

HTML

<div ng-repeat="contact in contacts" 
     ng-show="showContactID == {{contact.contact_id}}">
    <div class="radio text-center">
        <label>
            <input type="radio" 
                   value="{{contact.contact_id}}" 
                   ng-checked="showContactID == {{contact.contact_id}}"
                   ng-model="transaction.contact_id">

            <img src="public/img/profiles/{{contact.contact_id}}.jpg" 
                 class="img-circle" 
                 height="150">
            <h4>{{contact.contact_name}}</h4>
        </label>
    </div>
</div>

<div class="row text-center">
    <div class="col-xs-6">
        <a class="btn" 
           ng-click="changeContact('prev')">
         <i class="fa fa-chevron-left fa-2x"></i></a>
    </div>
    <div class="col-xs-6">
        <a class="btn" 
           ng-click="changeContact('next')">
         <i class="fa fa-chevron-right fa-2x"></i></a>
    </div>
</div>

CSS

.transaction .form-group.contacts input {
    display: none;
}

.transaction .form-group.contacts .radio {
    padding-left: 0;
}

JavaScript

$scope.changeContact = function(which){

    var currentContactID = $scope.showContactID;
    var newContactID = 0;

    if(which){

        angular.forEach($scope.contacts, function(contact, key){

            if(contact.contact_id == currentContactID){

                if($scope.contacts[which == 'next' ? key + 1 : key - 1] == undefined){

                    newContactID = $scope.contacts[which == 'next' ? 0 : $scope.contacts.length - 1].contact_id;

                }
                else{

                    newContactID = $scope.contacts[which == 'next' ? key + 1 : key - 1].contact_id;

                }

            }

        });

        $scope.showContactID = newContactID;

    }

};

Answer 1

每当您调用changeContact函数时，还要在同一函数中使用newContactID更新transaction.contact_id值。