根据下拉菜单中的选择来改变段落文本——Angular
Change paragraph text based on selection from drop down - Angular
我试图根据用户从下拉菜单中选择的内容更改字母中的段落,我无法使其工作。
我不确定ng-show/hide是否可行,或者ng-options是否可行。我真的搞不懂这个。我一整天都在绞尽脑汁。
app.controller('letterCreateCtrl', function($scope) {
$scope.selectItemsFilterCriteria = [
{id: 1, name: "An event that occurred in the past 12 months"},
{id: 2,name: "child/family got a new dog"},
{id: 3, name: "child/family got a new cat"}
];
});
<select ng-options="item.name for item in selectItemsFilterCriteria" name="field_event">
<option value="" disabled hidden selected>An event that occurred in the past 12 months</option>
<optgroup label="Pets">
<option value="Pets-1">Child/family got a new dog</option>
<option value="Pets-2">Child/family got a new kitten</option>
<option value="Pets-3">Child/family got a new rabbit</option>
</optgroup>
<optgroup label="Development">
<option value="Development-1">Baby began sitting up on their own</option>
<option value="Development-2">Child learned to walk</option>
<option value="Development-3">Child started to get baby teeth</option>
</optgroup>
</select>
<p>paragraph to change ipsum ipsum</p>
查看此处
<div ng-controller="testCtrl">
<select ng-options="item.name for item in selectItemsFilterCriteria" name="field_event" ng-model="paragraphToShow">
</select>
<p>{{paragraphToShow.para}}</p>
</div>
我想你应该看看这个,也许你会找到解决问题的办法。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.flights = [{
value: 'val1',
text: 'text1'
}, {
value: 'val2',
text: 'text2'
}, {
value: 'val3',
text: 'text3 '
}];
$scope.model = {flight:'val2'};
//this is a default value; if you don't want a default, you can leave this out,
//and it will have a blank initially. otherwise, you can put a blank row and
//handle it in validation
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select name="flightNum" class="form-control" ng-model="model.flight" ng-options="v.value as v.text for v in flights" required></select>
<br/>
<br/>
Selected value (in model.flight):
<div>
<b>{{model.flight}}</b>
</div>
</body>
</html>
相关文章:
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- 为什么使用immutableJS我的状态没有改变
- Javascript-在文本区域中断,但不在段落中中断
- JavaScript改变了双方的显示风格
- 附加“;显示更多“;仅当满足设定的字符数时,链接到截断的段落
- 改变所有<td>为特定的桌子点击颜色
- 变量dos'即使我可以返回更新后的值,也不会改变
- jQuery更改变量值
- 爆米花改变来源
- innerHTML赢得't改变元素
- Javascript onclick更改变量值
- "改变“;列表头,然后继续处理列表
- Javascript-从随机的单词数组中创建段落
- 是否可以使用“;document.all”;在IE11中,而不改变每次使用
- 根据下拉菜单中的选择来改变段落文本——Angular
- 如何使链接在点击时改变段落的内容?返回false,不工作
- 在JavaScript中使用childNodes改变段落样式
- 如何用JavaScript改变一个段落的字体大小
- 为什么不通过jQuery和AJAX来改变段落呢?