我有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模型效果很好。
你能帮我吗?
答案 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。