4

使用 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>
4

3 回答 3

4

你可以这样尝试

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>
于 2014-07-16T13:33:23.573 回答
0

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

$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">
于 2014-07-16T13:26:54.663 回答
0

这是一个工作示例。首先我们设置我们的选项和输入。

<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我们可以简单地将我们的文本输入值附加到数组中，并且由于数据绑定，角度将为我们处理更新。

于 2014-07-16T14:12:26.487 回答