TalonHughes TalonHughes - 24 days ago 7
HTML Question

Change paragraph text based on selection from drop down - Angular

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

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>