Change paragraph text based on selection from drop down - Angular

Question

I am trying to change a paragraph in a letter based on what the user selects from the drop down menu, I can't get it to work.

I am not sure if ng-show/hide is the way to go or if ng-options is the way to go. I am seriously lost on this one. I've racked my brain all day.

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 I want to be able to change between pre-written paragraphs based on what is selected in the drop down select. so if a user selects child/family got a new dog...the paragraph would change to "I hear you got a new dog! that is great. take good care of it...etc. or if the user selects Child learned to walk the paragraph would change to "I hear you're learning to walk. Keep at it, practice makes perfect....etc." — StuffedPoblano, Nov 16 '16 at 07:05

score 1 · Accepted Answer · answered Nov 16 '16 at 07:10

1

See the fiddle - 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>

answered Nov 16 '16 at 07:10

Disha

822
1
10
39

You are amazing. A lot less code than I thought as well. This should work! Thank you very much. – StuffedPoblano Nov 16 '16 at 08:05
Will it matter that I have some tags in there? Will it mess up the ng-options? – StuffedPoblano Nov 16 '16 at 08:09
you can add it groups - see the link http://stackoverflow.com/a/18615773/5198430 – Disha Nov 16 '16 at 08:35

score 1 · Answer 2 · answered Nov 16 '16 at 07:15

I think you have to look on this, may be you find your solution for the problem.

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>

Change paragraph text based on selection from drop down - Angular

2 Answers2