文本区域与下拉列表链接

时间:2014-08-01 18:33:24

标签: javascript angularjs angularjs-directive

我有一个链接到文本区域的下拉列表,因此当从下拉列表中选择一个选项时,textarea会自动从同一模型中填充。可在此处查看工作版本:JSFiddle

我正在尝试做的是以编程方式更改下拉列表并将更改反映在文本区域中。我可以通过设置值来更新下拉菜单,当下拉列表显示正确时,更改不会级联到文本区域。手动设置下拉列表时不会触发ng-change,并且我无法设置文本区域的值,因为它是下拉模型的关系产品。

我正在尝试做什么?

<div ng-controller="Ctrl">
            <div class="inputItem sectionArea">
                <label>Sample List:</label>
                <select class="allVars"
                        ng-change="selectAction()"
                        ng-model="allVarsDD"
                        ng-options="allVars.text_short for allVars in allVars"
                        >
                        <option value="">-- Select Option --</option>
                </select>
                <br/>
                <textarea class="frequentInstructions inputLine" type="textarea" name="frequentInstructions"
                          ng-model="allVarsDD.text_long"
                </textarea>
             </div>
<div>
<script>
var app = angular.module('app', []);
function Ctrl($scope) {  
$scope.allVars=[
    {"fid":"1","environment":"0","text_short":"Short text 1","text_long":"text_long_1"},
    {"fid":"1","environment":"0","text_short":"Short text 2","text_long":"text_long_2"},
    {"fid":"1","environment":"0","text_short":"Short text 3","text_long":"text_long_3"}
    ];
}
</script>

1 个答案:

答案 0 :(得分:0)

我找到了正确的设置语法:

在此示例中将其设置为项目#1: $ scope.allVarsDD = $ scope.allVars [1];

我更新了小提琴,以反映正确的用法。