根據從下拉列表中的選擇更改段落文本 - 角

我想根據用戶從下拉菜單中選擇什麼來改變一個字母中的段落，我無法讓它工作。根據從下拉列表中的選擇更改段落文本 - 角

我不確定如果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選項嗎？ – 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

根據從下拉列表中的選擇更改段落文本 - 角

回答

相關問題