Изменить текст абзаца на основе выбора из раскрывающегося списка - Угловое

Я пытаюсь изменить абзац в письме в зависимости от того, что пользователь выбирает из выпадающего меню, я не могу заставить его работать.Изменить текст абзаца на основе выбора из раскрывающегося списка - Угловое

Я не уверен, что 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>

источник

2016-11-16 StuffedPoblano

пожалуйста, вы можете уточнить, что именно ваше требование – Disha

@ PD7 Я хочу, чтобы иметь возможность переключаться между предварительно написанных пунктов основываясь на том, что выбран в раскрывающемся списке выберите. поэтому, если пользователь выбирает ребенка/семью, получил новую собаку ... абзац изменится на «Я слышал, что у вас есть новая собака! Это здорово, хорошо позаботьтесь об этом ... и т. д., или если пользователь выбирает ребенка, для ходьбы абзац изменится на «Я слышал, вы учитесь ходить. Держитесь за это, практика делает совершенным .... и т. Д. » – StuffedPoblano

проверить http://plnkr.co/edit/PIXZZO81aQKj4kmngoXy?p=preview –

Смотрите скрипку - 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>

источник

2016-11-16 07:10:36 Disha

обновить мой ответ – Disha

Ты потрясающий. чем я думал.Это должно работать! Спасибо большое. – StuffedPoblano

Будет ли это иметь значение, что у меня есть тегов? Будет ли это испортить ng-options? – StuffedPoblano

Я думаю, вы должны смотреть на это, может быть, вы найдете решение этой проблемы.

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="[email protected]" 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>

источник

2016-11-16 07:15:10

Изменить текст абзаца на основе выбора из раскрывающегося списка - Угловое

ответ

Смежные вопросы