Angular js radio buttons for object array parameter

Question

I am new to angular js, I am having trouble selecting default value for radio button for a c# list property,

I have fiddle link, and the code is as below,

HTML:

<div ng-controller="MyCtrl">
<p>Questions:</p>
<ul>
    <li ng-repeat="question in data">
        <label>{{question.QuestionDescription}}</label>
        <div ng-repeat="i in question.Options">
            {{i.OptionDescription}}<input type="radio" value="{{i.Id}}" name="QuestionAnswer"/>Yes
            <input type="radio" value="{{i.Id}}" name="QuestionAnswer"/>No
        </div>
    </li>
</ul>

ANGULAR SCRIPT:

enter code herefunction MyCtrl($scope) {
$scope.data = [{
    "QuestionId":1,
    "QuestionDescription": "What is your fav color?",
    "Options":[{"Id":1,"OptionDescription":"White","IsAnswer":true},
               {"Id":2,"OptionDescription":"Black","IsAnswer":false}]
}];

}

THE RESULT HTML WITHOUT DEFAULT SELECTED

WHAT I NEED HELP FOR:

I want the defaults to be selected when page loads
Data binding if the Admin changes the options

LINK FOR JSFIDDLE that I wrote mocking the data

TheRodeo · Accepted Answer · 2014-07-14 11:04:10Z

I am not sure how the fiddle works so I am just gonna post the solution here. Your question was two fold.

To apply data binding for radio buttons
To initialize with value.

While number 1 should have taken care of 1, for me it didn't. Maybe someone will have a better solution. I used ng-modal for data-binding and a custom directive with timeout to initialize the values. Code below.

var first2 = angular.module('first22', []);
    first2.controller('myCtrl', [ '$scope', function ($scope) {
        $scope.data = [{
            "QuestionId":1,
            "QuestionDescription": "What is your fav color?",
            "Options":[{"Id":1,"OptionDescription":"White","IsAnswer":true},
                       {"Id":2,"OptionDescription":"Black","IsAnswer":false}]
        }];
    }])
    first2.directive('updateStatus',['$timeout',function($timeout)
    {
        return{
            restrict:'A',
            scope: true,
            link: function(scope, element, attrs) {
                $timeout(function(){
                    var stat = attrs.updateStatus.toLowerCase() == "true" ? true : false;
                    $(element)[0].checked = stat;
                    }, 0, false);
            },
        }
    }]);

HTML

<body ng-app="first22">
<div ng-controller="myCtrl">
    <p>Questions:</p>
    <ul>
        <li ng-repeat="question in data" >
            <label>{{question.QuestionDescription}}</label>
            <div ng-repeat="i in question.Options">
                {{i.OptionDescription}}
                <input type="radio" name="QuestionAnswer{{$index}}" ng-model="i.IsAnswer" value="true" update-status="{{i.IsAnswer}}"/>Yes
                <input type="radio" name="QuestionAnswer{{$index}}" ng-model="i.IsAnswer" value="false" update-status="{{!i.IsAnswer}}"/>No
                -- {{i.IsAnswer}}
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
</body>

Why I had to you custom directive? I had used ng-selected but, I believe, on data binding, the selected values get reset and hence the timeout in the custom directive.

Raghav · Accepted Answer · 2014-07-15 03:24:26Z

Found the solution: updated fiddle link http://jsfiddle.net/raghav_puthu/MpyFW/21/
1) For Auto binding the data with default radio checked:

assign the "value" attribute of the radio option(in my case as its a boolean, assgining as "1" and "0"), then assign the "ngModel" angular directive attribute value from the value of the server as (ngModel="i.IsAnswer")

<div ng-controller="MyCtrl">
<p>Questions:</p>
<ul>
    <li ng-repeat="question in data">
        <label>{{question.QuestionDescription}}</label>
        <div ng-repeat="i in question.Options">
            {{i.OptionDescription}}
            <input type="radio" ng-model="i.IsAnswer" value="1" name="QuestionAnswer{{i.Id}}"/>Yes
            <input type="radio" ng-model="i.IsAnswer" value="0" name="QuestionAnswer{{i.Id}}"/>No
        </div>
    </li>
</ul>

2)For 2 way binding:

In your angular controller, extend the controller to have a function which takes the changed values and posts to the server, code below,

    // update existing question
$scope.updateQuestion = function (index) {
    var question = JSON.stringify($scope.data[index]);
    $http({
        method: 'POST',
        url: "/Admin/SaveQuestion",
        data: "question="+question,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).
    then(function (result) {
        $window.location = "#/";
    },
    function () {
        //error
        alert("question could not be saved");
    });
};

And now your html should be as below, assinging click event to trigger the above event on any change,

<div class="question row" data-ng-repeat="i in data">
        <div class="q-description span5">
            <h3>{{ i.QuestionDescription }}</h3><a href="javascript:void(0);" ng-click="updateQuestion($index);">Update Question</a>
        </div>
        <div class="option span6">
            <ul class="o-content">

                <li class="o-description" data-ng-repeat="o in i.Options">
                    <div class="o-d-text">{{ o.OptionDescription }}</div>
                    <div class="o-d-option">
                        Is Right Answer:
                        <input type="radio" name="optionSelected{{o.Id}}" ng-model="o.IsAnswer" value="1" />Yes
                        <input type="radio" name="optionSelected{{o.Id}}" ng-model="o.IsAnswer" value="0" />No
                    </div>
                </li>

            </ul>
        </div>
    </div>

Collectives™ on Stack Overflow

Angular js radio buttons for object array parameter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related