根据下拉选择更改段落文本 - Angular答案

【问题标题】：Change paragraph text based on selection from drop down - Angular根据下拉选择更改段落文本 - Angular
【发布时间】：2017-03-30 06:22:12
【问题描述】：

我正在尝试根据用户从下拉菜单中选择的内容更改信函中的段落，但无法正常工作。

我不确定 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>

【问题讨论】：

你能详细说明你的要求是什么
@pD7 我希望能够根据在下拉选择中选择的内容在预先编写的段落之间进行更改。因此，如果用户选择孩子/家庭有一只新狗......该段落将更改为“我听说你有一只新狗！那太好了。好好照顾它......等等。或者如果用户选择孩子学习to walk 段落将更改为“我听说你正在学习走路。坚持下去，熟能生巧……等等。”
检查plnkr.co/edit/PIXZZO81aQKj4kmngoXy?p=preview
@PushkarAdhikari 谢谢！

标签： javascript html angularjs ng-options

【解决方案1】：

看小提琴 - here

<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>

【讨论】：

你太棒了。代码也比我想象的要少得多。这应该工作！非常感谢。
我有一些标签有关系吗？它会弄乱 ng-options 吗？
你可以添加它的组 - 见链接stackoverflow.com/a/18615773/5198430

【解决方案2】：

我认为你必须看看这个，也许你会找到解决问题的方法。

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>

【讨论】：