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

时间:2014-10-19 14:05:03

标签: javascript angularjs

我正在尝试在选中单选按钮时更新ng-model。虽然我的单选按钮实际上是图像,而我的单选按钮正由一个函数使用箭头循环来更新。

出于某种原因,我的$ scope.transaction仅在我实际点击图片时更新,而不是使用箭头更改图像。知道为什么吗?

My UI

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;

    }

};

1 个答案:

答案 0 :(得分:1)

每当您调用changeContact函数时,也会在同一函数中使用transaction.contact_id更新newContactID值。