角度输入无线电不适用于ng-repeat

时间:2015-05-31 23:09:43

标签: angularjs radio-button nested angularjs-ng-repeat

我有ng-radio和嵌套ng-repeat的问题。 Plunker是here

查看:

    <div class="modal-header">
    <h3 ng-if="inquiry.name" class="modal-title">{{inquiry.name}}</h3>
    <h3 ng-if="!inquiry.name" class="modal-title">Add new inquiry</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">Inquiry 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="inquiry_question in inquiry.inquiry_questions">
                  <td class="v-middle">
                    <input type="text" min="0" class="form-control" id="productPrice" placeholder="Question name" ng-model="inquiry_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="inquiry_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="inquiry_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="inquiry_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="inquiry_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">Inquiry 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="inquiry_question_answer in inquiry_question.inquiry_answers">
                                  <td class="v-middle">
                                    <div ng-if="inquiry_question.type=='text'">
                                      <input type="text" min="0" class="form-control" placeholder="Answer name" ng-model="inquiry_question_answer.name" />
                                    </div>
                                    <div ng-if="inquiry_question.type=='images'">
                                      <button ng-file-select="" ng-model="files.uploads" ng-if="!inquiry_question_answer.photo" ng-validui-jq="filestyle" class="btn-primary btn-sm btn-addon" ng-click="uploadHandler(inquiry_question_answer)">
                                        <i class="fa fa-plus"></i>
                                        Add inquiry photo answer
                                      </button>
                                      <div ng-if="inquiry_question_answer.photo">
                                        <div class="thumb-md">
                                          <img ng-src="../data/{{inquiry_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(inquiry_question_answer)">
                                          <i class="glyphicon glyphicon-repeat"></i>
                                          Change inquiry photo answer
                                        </button>
                                      </div>
                                    </div>
                                  </td>
                                  <td style="white-space: nowrap">
                                    <div class="buttons">
                                      <button class="btn btn-sm btn-danger" ng-click="remove_inquiry_answer(inquiry_question.inquiry_answers,$index)">del
                                      </button>
                                    </div>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <button class="btn btn-sm btn-primary btn-addon width-inherit" ng-click="add_inquiry_answer(inquiry_question.inquiry_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_inquiry_question(inquiry.inquiry_questions,$index)">del
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <button class="btn btn-sm btn-primary btn-addon width-inherit" ng-click="add_inquiry_question(inquiry.inquiry_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.inquiry = {
            inquiry_questions: [
                {
                    inquiry_answers:[]
                }
            ]
        };
    $scope.cancelInquiry = function () {
        $scope.inquiryFormShow = false;
    }

    $scope.add_inquiry_question = function (inquiry_questions) {
        inquiry_questions.push({name: "", type: "text", form: "multiple", inquiry_answers: []});
    }

    $scope.remove_inquiry_question = function (inquiry_questions,index) {
        inquiry_questions.splice(index, 1);
    };

    $scope.add_inquiry_answer = function (inquiry_answers) {
        inquiry_answers.push({name: ""});
    }

    $scope.remove_inquiry_answer = function (inquiry_answers, index) {
        inquiry_answers.splice(index, 1);
    };
});

基本上在ng-repeat ngmodel中,这些单选按钮似乎对任何更改都没有响应。正如您在创建新问题并在无线电中选择值后可以在plunker中看到的那样,ng-if不会尊重此值。如果我从json预填充查询对象,则所有单选按钮都是非选择的,如果它们在json中有值。用于文本输入的Ng模型效果很好。

你能帮我吗?

1 个答案:

答案 0 :(得分:0)

根据我的理解,你应该使用带有角度表达式而非纯文本的ng-value,这意味着使用范围变量,而不是ng-value="text",而不是使用$scope.textValue = 'text';

ng-value="textValue"

并将ng值绑定到该表达式

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

当然所有其他ng值(图像,单个,多个选择)

也是如此

关于ng-ifs,它只是

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

而不是

org.eclipse.ui.main.toolbar

这是一个有效的plunker