用angularjs绑定单选按钮和输入文本域
binding radio buttons and input text fields with angularjs
我对这段代码有一些问题,并且卡住了。我试图显示两个答案(从两个问题)在只有一行和动态在底部"你的答案"之后,所以他们动态地改变,如果用户改变选择无论是在单选按钮或下拉菜单。到目前为止我只能显示一个答案。此外,在选择输入文本字段中有一个错误。当用户输入时,应该显示1个秋天,2个春天等等,但现在它只适用于从0到3的数字,而不是1到4。我尝试了不同的方法来解决这个问题,但都没有成功
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.actresses = [
{model : "Jenna"},
{model : "Mia"},
{model : "Julia"},
{model : "Olivia"}
];
$scope.quarters=[
{model : "fall", number : 0},
{model : "spring", number : 1},
{model : "summer", number : 2},
{model : "winter", number : 3},
];
$scope.change = function(a){
console.log(a);
$scope.selectedQuarter= $scope.quarters[a];
console.log($scope.selectedQuarter);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<section>
<p><b>Question 1</b></p>
<p>What is your favorite quarter?</p>
<select ng-model="selectedQuarter" ng-options="x.model for x in quarters"></select>
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[0]"> fall
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[1]" > spring
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[2]"> summer
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[3]"> winter
<p>Selection <input type="text" ng-model="selectedQuarter.number" ng-change="change(selectedQuarter.number)" /></p>
</section>
<section>
<p><b>Question 2</b></p>
<p>Who is your favorite actress?</p>
<select ng-model="selectedActress" ng-options="x.model for x in actresses"></select>
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[0]"> Jenna
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[1]" > Mia
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[2]"> Julia
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[3]"> Olivia
</section>
<section>
<p><b>your answers:</b></p>
<div ng-switch="selectedActress.model">
<div ng-switch-when="Jenna">
<p>Actress Jenna</p>
</div>
<div ng-switch-when="Mia">
<p>Actress Mia</p>
</div>
<div ng-switch-when=Julia>
<p>Actress Julia</p>
</div>
<div ng-switch-when=Olivia>
<p>Actress Olivia</p>
</div>
</div>
</section>
非常感谢
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.actresses = [{
model: "Jenna"
}, {
model: "Mia"
}, {
model: "Julia"
}, {
model: "Olivia"
}];
$scope.quarters = [{
model: "fall",
number: 0
}, {
model: "spring",
number: 1
}, {
model: "summer",
number: 2
}, {
model: "winter",
number: 3
}, ];
$scope.change = function() {
//console.log(a);
$scope.selectedQuarter = $scope.quarters[$scope.number - 1];
//console.log($scope.selectedQuarter);
};
$scope.$watch('selectedQuarter', function() {
//console.log(a);
if ($scope.selectedQuarter)
$scope.number = $scope.selectedQuarter.number + 1;
//console.log($scope.selectedQuarter);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<section>
<p><b>Question 1</b>
</p>
<p>What is your favorite quarter?</p>
<select ng-model="selectedQuarter" ng-options="x.model for x in quarters" ng-change="change1()"></select>
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[0]">fall
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[1]">spring
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[2]">summer
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[3]">winter
<p>Selection
<input type="number" ng-model="number" ng-change="change()" />
</p>
</section>
<section>
<p><b>Question 2</b>
</p>
<p>Who is your favorite actress?</p>
<select ng-model="selectedActress" ng-options="x.model for x in actresses"></select>
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[0]">Jenna
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[1]">Mia
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[2]">Julia
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[3]">Olivia
</section>
<section>
<p><b>your answers:</b>
</p>
<div ng-switch="selectedActress.model">
<div ng-switch-when="Jenna">
<p>Actress Jenna</p>
</div>
<div ng-switch-when="Mia">
<p>Actress Mia</p>
</div>
<div ng-switch-when=Julia>
<p>Actress Julia</p>
</div>
<div ng-switch-when=Olivia>
<p>Actress Olivia</p>
</div>
</div>
</section>
相关文章:
- 尝试在PHP中回显输入文本时出现未定义的索引错误
- 使用模拟按键在输入框中自动输入文本
- 如何添加类,同时开始在文本字段中输入文本
- JQuery使用相同的功能自动完成各种输入文本
- 如何设置输入文本框jquery的值
- 输入文本框为空时的阻止按钮asp.网络表单
- 基于单选框更新页眉,选中并选择输入文本
- 将输入文本与某个选项的值相匹配并自动选择
- 如何在 JavaScript 中创建输入文本框
- 如何使用纯Javascript观看输入文本框
- 需要使用javascript获取输入文本,然后将其添加到句子中
- php&js-将电子邮件添加到输入文本中
- 动态启用/禁用来自控制器的输入文本
- .val()不返回输入文本
- 从确认框中预填充输入文本框
- 如何使用JavaScript解析输入文本中给定的数据
- 添加/删除/更改输入文本的部分值
- 根据输入文本按元素排序,AngularJS
- 如何将(a*b)两个输入文本值相乘,并在javascript中随文本变化动态显示
- 如何从Tr重复的输入文本中获取值