在angularjs中将数据从控制器传递到视图的占位符
我通过调用angularjs中的GET方法来获取数据集 控制器在angularjs中将数据从控制器传递到视图的占位符,angularjs,model-view-controller,Angularjs,Model View Controller,我通过调用angularjs中的GET方法来获取数据集 控制器 $scope.edit = function (id) { var edit_url = 'http://localhost/AwtCW2012002/api/restApiController/editQuestion.json?question_id=' + id; $http.get(edit_url)
$scope.edit = function (id) {
var edit_url = 'http://localhost/AwtCW2012002/api/restApiController/editQuestion.json?question_id=' + id;
$http.get(edit_url)
.success(function (data) {
console.log(data);
})
.error(function () {
})
};
GET方法中的数据如下所示
如何将数据传递到视图中的各个字段中(传递到占位符中,因为此视图用于编辑现有数据)
查看
<div class="container" ng-controller="questionEditCtrl">
<form class="form-horizontal" role="form" name='quizAdd' ng-submit="submit(data)">
<div class="form-group">
<label class="control-label col-sm-2" for="question">Question:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="question" ng-model="data.question" placeholder="Enter Question">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer1">Answer 1:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer1" ng-model="data.ans1" id="answer1" placeholder="Enter Answer 1">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer2">Answer 2:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer2" ng-model="data.ans2" id="answer2" placeholder="Enter Answer 2">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer3">Answer 3:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer3" ng-model="data.ans3" id="answer4" placeholder="Enter Answer 3">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer4">Answer 4:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer4" id="answer4" ng-model="data.ans4" placeholder="Enter Answer 4">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="answer5">Answer 5:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer5" id="answer5" ng-model="data.ans5" placeholder="Enter Answer 5">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="sel1">Select Correct Answer:</label>
<div class="col-sm-10">
<select class="form-control" ng-model="data.correct_ans" id="sel1">
<option>{{data.ans1}}</option>
<option>{{data.ans2}}</option>
<option>{{data.ans3}}</option>
<option>{{data.ans4}}</option>
<option>{{data.ans5}}</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
问题:
答复1:
答复2:
答复3:
答复4:
答复5:
选择正确答案:
{{data.ans1}}
{{data.ans2}}
{{data.ans3}}
{{data.ans4}
{{data.ans5}}
提交
您将获得数组中的响应。使用ng repeat渲染字段。重复执行的操作,可以添加占位符,如
placeholder="Write Answer {{$index}}"
首先,使用api中的数据填充
$scope
变量,使其可用于在模板中绑定:
$http.get(edit_url)
.success(function (data) {
$scope.data = data; //populate a scope variable
})
.error(function () {
});
然后,可以对占位符使用一次性表达式:
,如下所示:
placeholder="{{::data.ans1}}"
这将确保仅使用从api获取的
data.ans1
的默认值作为占位符。对数据的所有后续更改。ans1
将更改值,但占位符将保持不变。首先通过ng repeat
呈现所有答案和问题,然后使用{$index+1}
显示占位符内的答案编号。使用{{::data.ans1}时,我只会得到一个空字段您是否用api中的数据填充了范围变量?在成功处理程序中,执行$scope.data=data;你能再解释一下吗?我是新来的angularjsI我已经像你说的那样做了。但是还是一样,没有价值,那么请创建一个plunker。