2015-05-31 63 views
2

嗨我有ng-radio和嵌套ng-repeat的問題。 Plunker是hereAngular,輸入收音機不能使用ng-repeat

查看:

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

基本上在這些單選按鈕NG重複ngmodel似乎不響應任何變化。正如您在創建新問題並在收音機中選擇值之後可以看到的那樣,這個值不受ng-if的尊重。如果我預先填充來自json的查詢對象,那麼所有的單選按鈕都是未選中的,如果它們在json中有值。文字輸入的Ng模型效果很好。

你能幫我嗎?

回答

0

據我瞭解,你應該使用NG-值與角度的表達,而不是純文本,意義,而不是使用ng-value="text",使用範圍變量,如:

$scope.textValue = 'text'; 

和綁定的NG-值該表達

ng-value="textValue" 

也是一樣的,當然所有其他NG-值(圖像,單發,多選擇)

關於NG-IFS,它只是

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

而不是

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

這裏的工作plunker