AngularJS 选择其他选项并从文本框中获取值答案

【问题标题】：AngularJS Select other option and get value from textboxAngularJS 选择其他选项并从文本框中获取值
【发布时间】：2014-07-16 13:22:39
【问题描述】：

使用 AngularJS，我有一个选定选项列表和一个额外的“新”选项。 What I am trying to do is, when "New" option is chosen it will show a text-box to add a new value.

<select ng-model="group.name" ng-options="bl.Name for bl in Groups" >
      <option value="VALUE FROM TEXT BOX">New</option>
</select> 

<div class="col-md-4" ng-show="WHEN NEW OPTION IS Chosen ">
<input class="text-box" type="text" name="NewValue" ng-model="group.name" />
</div>

【问题讨论】：

标签： angularjs angularjs-directive angularjs-select2

【解决方案1】：

你可以这样试试

Working Demo

<div ng-app='myApp' ng-controller="ArrayController">
    <select ng-model="group.name" ng-options="Group.Name for Group in Groups"></select>
    <div class="col-md-4" ng-show="group.name.Value == 'new'">
        <input class="text-box" type="text" name="NewValue" ng-model="newValue" />
        <button ng-click="add(newValue)">Add</button>
    </div>
</div>

【讨论】：

抱歉造成混淆，但“VALUE FROM TEXT BOX”意味着它将从文本框中获取 group.name ng-model 的值。它就像任何其他下拉操作一样，您可以在其中添加新值的其他选项。文本框似乎添加了新值。
在下拉列表中选择新选项时，您希望显示文本字段，并且您想向 select 添加一个新选项，对吗
是的。要查看 group.name 值，请检查此 {{group.name}} 它不会随解决方案中的文本字段值而改变
您好，感谢您的支持。这几乎是答案。但是一旦它添加了新值，它也应该在下拉列表中被选中。您能否相应地更新您的解决方案，以便我可以将其标记为答案。
它确实按照您在 jdFiddle 上提供的第一个代码工作。似乎第二个和第三个链接中的代码已损坏。单击“添加”按钮不会将条目添加到第二个链接的列表中，并且第三个链接中没有“添加”按钮。这使得发布在第一个链接中的代码成为 OP 问题的最终答案。我说的对吗？

【解决方案2】：

只需注意所选项目的变化：

$scope.displayDiv = false;
$scope.newval = 'newval';
$scope.$watch('group.name', function(newval, oldval) {
    if (newval == $scope.newval) {
         $scope.displayDiv = true;
    }

}

对于 HTML：

<div class="col-md-4" ng-show="displayDiv">

【讨论】：

【解决方案3】：

这里是a working example。首先我们设置我们的选项和输入。

<select ng-model="curopt" 
        ng-options="option.name for option in options">
</select>
<input type="text" ng-model="newopt" 
       ng-show="curopt.name == 'New'" 
       ng-keypress="newOption($event)">

我们输入的 ng-show 选项与当前选定选项的名称相关联。我们还添加了一个 ng-keypress 指令来允许我们处理被按下的回车键。

现在到控制器...

$scope.newOption = function(event) {
  if (event.which == 13) {
    $scope.options.push({ name : $scope.newopt, value : $scope.newopt });
    $scope.newopt = '';
  }
}

因为我们的选择输入选项与$scope.options 绑定，我们可以简单地将我们的文本输入值附加到数组中，并且由于数据绑定，Angular 将为我们处理更新。

【讨论】：

感谢您的回答。但是是否有可能在您插入新值时自动选择它。