ドロップダウンからの選択に基づいて段落テキストを変更します - 角度

ユーザーがドロップダウンメニューから選択した文字に基づいて段落を変更しようとしていますが、動作させることができません。ドロップダウンからの選択に基づいて段落テキストを変更します - 角度

ng-show/hideが行く方法であるかどうか、またはng-optionsが行く方法であるかどうかはわかりません。私は真剣にこの1つを失っています。私は一日中私の脳を頑張った。

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

あなたは正確にPD7 @あなたの条件 – Disha

は、私が選択ドロップダウンで選択されている内容に基づいて事前に書かれた段落の間で変更できるようにしたいです何手の込んだしてくださいすることができます。あなたが新しい犬を持っている子供/家族を選択した場合、その段落は「あなたは新しい犬がいると聞きました！それは素晴らしいですね...それを大切にしてください...など。段落を歩くことは "あなたが歩くことを学んでいると聞いています。それを練習して、完璧なことをするなど... " – StuffedPoblano

check 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

ドロップダウンからの選択に基づいて段落テキストを変更します - 角度

答えて

関連する問題