AngularJs如何生成sliderbars与显示值列表 [英] AngularJs how to generate a list of sliderbars with displayed value
问题描述
我想有一个问题清单，并有一个与每个问题下面显示的值滑动条。
I want to have a list of questions and there is a slider bar with displayed value following each of the questions.
下面是例子，如何做数据绑定从AngularJs网站：
Here is the example how to do the data-binding from AngularJs website:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
但在我而言，我将使用NG-重复，所以在这种情况下，所有的滑动条将拥有相同的id和名称生成我的问题清单。
But in my case, I will generate a list of my questions by using ng-repeat, so in this case, all the slider bars will have same id and name.
<div ng-repeat="q in questions">
<span>{{q.description}}</span>
<input type="range" id="{{'sa' + q.id}}" value="0" min="1" max="10" ng-model="{{'rv' + q.id}}">
<span >{{"rv" + q.id}}</span>
</div>
正如你可以看到，我想结合RV（排名值）和问题ID来解决冲突的ID。
As you can see that I'm trying to solve conflict ids by combining 'rv' (ranking value) and question id.
不过，我得到一个错误：
But I get an error:
错误：[$解析：语法]语法错误：令牌''房车'是一个意外，
期待[：]的前pression第3栏[{{'房车'+ q.id}}]启动
在['房车'+ q.id}}]
Error: [$parse:syntax] Syntax Error: Token ''rv'' is unexpected, expecting [:] at column 3 of the expression [{{'rv' + q.id}}] starting at ['rv' + q.id}}].
更新
我要上传答案的列表返回到我的服务器。
现在的问题模型不抱来存储用户回答任何属性。
相反，一个称为模型：question_answer具有回答为存储用户输入答案的属性
I want to upload the list of answers back to my server. The question model doesn't hold any attribute to store user answers. Instead, a model called: question_answer which has answer as the attribute to store the user input answer.
如何实现这部分？通过HTTP $ ??
How to achieve this part? Through $http??
更新2
下面是控制器code：
Here is the controller code:
var trialApp = angular.module("trialApp", []);
trialApp.controller('questionControl', function ($scope, $http) {
$scope.counter = 1;
$http.get("http://my.azurewebsites.net/api/question_category").success(function (data) {
$scope.questionsCategories = data;
}).error(function () {
alert("Failed to fetch question_category instances from database, please check your Internet connection!");
});
$http.get("http://my.azurewebsites.net/api/Questions").success(function (data) {
$scope.questions = data;
}).error(function () {
alert("Failed to fetch questions from database, please check your Internet connection!");
});
});
这是question_answer的数据结构
And here is the data structure of question_answer
{
"question_id": 5,
"answer": ""
}
感谢您。
推荐答案
确定。我觉得你的输入建议立即进行删除是这样的：
OK. I think your input shoul be like this:
<input type="range" id="{{'sa' + q.question_id}}" value="0" min="1" max="10" ng-model="q.answer">
这篇关于AngularJs如何生成sliderbars与显示值列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
