angularjs - Angular, input radio doesn't work with ng-repeat -
hi have problem ng-radio , nested ng-repeat. plunker here
view:
<div class="modal-header"> <h3 ng-if="inquiery.name" class="modal-title">{{inquiery.name}}</h3> <h3 ng-if="!inquiery.name" class="modal-title">add new inquiery</h3> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-heading font-bold">inquiery questions</div> <div class="panel-body"> <table class="table table-bordered table-hover table-condensed bg-white-only"> <tbody> <tr style="font-weight: bold"> <th style="width:90%">name </th> <th style="width:10%"></th> </tr> <tr ng-repeat="inquiery_question in inquiery.inquiery_questions"> <td class="v-middle"> <input type="text" min="0" class="form-control" id="productprice" placeholder="question name" ng-model="inquiery_question.name" /> <div class="row"> <div class="col-sm-6 col-xs-12"> <div class="radio"> <label class="i-checks"> <input type="radio" ng-attr-name="{{$index}}_type" ng-value="text" ng-model="inquiery_question.type" /> <i></i> text </label> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="radio"> <label class="i-checks"> <input type="radio" ng-attr-name="{{$index}}_type" ng-value="images" ng-model="inquiery_question.type" /> <i></i> images </label> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-xs-12"> <div class="radio"> <label class="i-checks"> <input type="radio" ng-attr-name="{{$index}}_form" ng-value="simple" ng-model="inquiery_question.form" /> <i></i> single select </label> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="radio"> <label class="i-checks"> <input type="radio" ng-attr-name="{{$index}}_form" ng-value="multiple" ng-model="inquiery_question.form" /> <i></i> multiple points </label> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-heading font-bold">inquiery answers</div> <div class="panel-body"> <table class="table table-bordered table-hover table-condensed bg-white-only"> <tbody> <tr style="font-weight: bold"> <th style="width:90%">name </th> <th style="width:10%"></th> </tr> <tr ng-repeat="inquiery_question_answer in inquiery_question.inquiery_answers"> <td class="v-middle"> <div ng-if="inquiery_question.type=='text'"> <input type="text" min="0" class="form-control" placeholder="answer name" ng-model="inquiery_question_answer.name" /> </div> <div ng-if="inquiery_question.type=='images'"> <button ng-file-select="" ng-model="files.uploads" ng-if="!inquiery_question_answer.photo" ng-validui-jq="filestyle" class="btn-primary btn-sm btn-addon" ng-click="uploadhandler(inquiery_question_answer)"> <i class="fa fa-plus"></i> add inquiery photo answer </button> <div ng-if="inquiery_question_answer.photo"> <div class="thumb-md"> <img ng-src="../data/{{inquiery_question_answer.photo}}" alt="" /> </div> <button ng-file-select="" ng-model="files.uploads" ng-validui-jq="filestyle" class="btn-primary btn-sm btn-addon" ng-click="uploadhandler(inquiery_question_answer)"> <i class="glyphicon glyphicon-repeat"></i> change inquiery photo answer </button> </div> </div> </td> <td style="white-space: nowrap"> <div class="buttons"> <button class="btn btn-sm btn-danger" ng-click="remove_inquiery_answer(inquiery_question.inquiery_answers,$index)">del </button> </div> </td> </tr> </tbody> </table> <button class="btn btn-sm btn-primary btn-addon width-inherit" ng-click="add_inquiery_answer(inquiery_question.inquiery_answers)"> <i class="fa fa-plus"></i> add new answer </button> </div> </div> </div> </div> </td> <td style="white-space: nowrap"> <div class="buttons"> <button class="btn btn-sm btn-danger" ng-click="remove_inquiery_question(inquiery.inquiery_questions,$index)">del </button> </div> </td> </tr> </tbody> </table> <button class="btn btn-sm btn-primary btn-addon width-inherit" ng-click="add_inquiery_question(inquiery.inquiery_questions)"> <i class="fa fa-plus"></i> add new question </button> </div> </div> </div> </div> </div> controller:
var app = angular.module('plunker', []); app.controller('mainctrl', function($scope) { $scope.inquiery = { inquiery_questions: [ { inquiery_answers:[] } ] }; $scope.cancelinquiery = function () { $scope.inquieryformshow = false; } $scope.add_inquiery_question = function (inquiery_questions) { inquiery_questions.push({name: "", type: "text", form: "multiple", inquiery_answers: []}); } $scope.remove_inquiery_question = function (inquiery_questions,index) { inquiery_questions.splice(index, 1); }; $scope.add_inquiery_answer = function (inquiery_answers) { inquiery_answers.push({name: ""}); } $scope.remove_inquiery_answer = function (inquiery_answers, index) { inquiery_answers.splice(index, 1); }; }); basically in ng-repeat ngmodel these radio buttons seems unresponsive changes. can see in plunker after creating new question , selecting value in radio, value not respected ng-if. if prepopulate inquiery object json radio buttons non selected even, if have value in json. ng model text input works well.
could please me?
from understand, should use ng-value angular expression rather plain text, meaning, instead of using ng-value="text", use scope variable like:
$scope.textvalue = 'text'; and bind ng-value expression
ng-value="textvalue" same goes other ng-values of course (images, single, multiple select)
regarding ng-ifs, it's just
ng-if="inquiery_question.type==='images'" instead of
ng-if="inquiery_question.type=='images'" here's working plunker.
Comments
Post a Comment