CODEWITHSUNDEEP
jqueryangularjs
Gitesh Purbia
Gitesh Purbia

Reputation: 1104

Angular js dynamically generated radio button automatically add name attribute

I am generating dynamically html element on page on drop event with jquery. After creating it i am compiling through $compile method of angular js. My jquery code is:-

$('#divcontainer').droppable({   //make icon image droppable. 
        drop: function(event, ui)
        {
            $('#droppable_video_cotainer').removeClass('col-lg-12 col-md-12 col-sm-12 col-xs-12').addClass('col-lg-7 col-md-7 col-sm-7 col-xs-12');
            var id = ui.draggable.attr("id");
            if(id == 'multiple_choice_question')
            {
                var div= '<div class="box box-mintgreen box-solid video-edit">';
                div+='<div class="box-header with-border">';
                div+= '<h3 class="box-title"><i class="fa fa-question-circle"></i> Quiz</h3>';
                div+='<div class="box-tools pull-right">';
                div+='<button class="btn btn-box-tool clickable" data-widget="remove" data-effect="fadeOut"><i class="fa fa-times"></i></button>';          
                div+='</div></div>';
                div+='<div class="box-body">';
                div+='<textarea style="width: 410px;" ng-model="videoCourseQuestions.mcss_question" rows="5"></textarea>';
                div+='<a id="mcss_add_option" align="center" style="cursor:pointer"> +Add option</a></br>';
                div+='<div id="addRdo" class="quiz-ans"> ';
                div+='<ul   class="mcss_option_list" id="mcss_option_list">';
                div+='<li><input type="radio" id="mcq_option1" ng-model="videoCourseQuestions.mcss_option" ng-value="option1"><input type="text" id="mcq_option#1" class="option" ng-model="videoCourseQuestions.mcss_option_1" placeholder="Enter your Option 1"/></li>';
                div+='<li><input type="radio" id="mcq_option2" ng-model="videoCourseQuestions.mcss_option" ng-value="option2"><input type="text" id="mcq_option#2" class="option" ng-model="videoCourseQuestions.mcss_option_2" placeholder="Enter your option 2"/></li>';
                div+='<li><input type="radio" id="mcq_option3" ng-model="videoCourseQuestions.mcss_option" ng-value="option3"><input type="text" id="mcq_option#3" class="option" ng-model="videoCourseQuestions.mcss_option_3" placeholder="Enter your option 3"/></li>';
                div+='<li><input type="radio" id="mcq_option4" ng-model="videoCourseQuestions.mcss_option" ng-value="option4"><input type="text" id="mcq_option#4" class="option" ng-model="videoCourseQuestions.mcss_option_4" placeholder="Enter your option 4"/></li>';
                div+='</ul>';
                div+='</div>';
                div+='<p class="sub"><input type="button" id="mscc_question_submit" class="btn btn-danger" set-on-click value="Submit"> <input type="reset" ng-model="mcss_btnreset" class="btn btn-default" value="Cancel"> </p>';
                div+='<ul class="box-footer">';
                div+='<li><i class="fa fa-clock-o"></i> save at <span>05:55</span></li>';
                div+='<li><i class="fa fa-pencil-square-o"></i> Update : <span>08:20</span></li>';
                div+='</ul>';
                div+='</div></div>';
                $('#Droppable_container').html(div);

                var $scope = angular.element('#Droppable_container').scope();
                $scope.compileElement('#Droppable_container');  
});

And compileElement of angular method is defined like :-

$scope.compileElement = function(element){
        $compile(element)($scope);
    };

Its all working fine. Html generate perfectly and ng-click is also working fine. But in radio buttons automatically added name attribute like name="004" and name="005" to all radio button and radio buttons are coming with selected. Why name attribute is added in radio buttons ?

Upvotes: 0

Views: 203

Answers (1)

Kevin Dre&#223;ler
Kevin Dre&#223;ler

Reputation: 447

Because name is a required attribute, without it radio buttons do not make sense at all. They are grouped according to their name. See the specs.

Please note that your code is hard to read, inefficient and violating angular best practices. My advice is that if you really want to use and learn angular, stop using jQuery. The only time where using jQuery would be ok according to angular best practices is when writing your own directives.

Angular is all about directives. Explore them, use them, write your own!

For instance, instead of assigning the lines to string variable div (which you are probably doing in the controller), use a directive and put all html in a template.

It might not be important to you at this time, but once your app grows in complexity you will know why I was so concerned.

Upvotes: 1

Related Questions