Угловое, входное радио не работает с ng-repeat

Question

Привет У меня проблема с ng-радио и вложенным ng-repeat. Plunker является here

Вид:

<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> 

Контроллер:

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); 
    }; 
}); 

В основном в нг-повтор ngmodel для этих кнопок радио кажется не реагирует на любые изменения. Как вы можете видеть в плункере после создания нового вопроса и выбора значения в радио, это значение не соблюдается ng-if. Если я предварительно заполняю объект запроса из json, все переключатели не будут выбраны, даже если они имеют значение в json. Модель Ng для ввода текста работает хорошо.

Не могли бы Вы помочь мне?

Answer 1

Из того, что я понимаю, вы должны использовать нг-значение с угловым выражением, а не простой текст, смысл, вместо того, чтобы использовать ng-value="text", используйте переменную области действия, как:

$scope.textValue = 'text'; 

И связывают нг-значение к этому выражению

ng-value="textValue" 

то же самое касается и всех остальных нг значений конечно (изображения, одиночные, множественный выбор)

что касается нг-КСФ, это просто

ng-if="inquiery_question.type==='images'" 

Вместо

ng-if="inquiery_question.type=='images'" 

Вот рабочий plunker.