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模型效果很好。
你能幫我嗎?