HTML

Question

我有一个要求，我必须在其中显示一个组合框（选择）。它中的选项没有修复，我需要提供一个链接来添加更多选项，在其单击中必须在select元素中显示一个文本框，用户将输入一个值，它将被添加到选择＆＃39 ; s选项。请告诉我如何使用Angular实现这一目标。 jQuery提供了一种方法，但如果我使用它，我无法使用Angular绑定元素。

此致

尼丁

Answer 1

我建议您查看AngularJS中的the docs dedicated to the select控件。简而言之，您可以使用ngRepeat为您生成选项。如果您需要从后端获取它们，可以在路由选项和服务中使用resolve为您抓取它们。

AngularJs网站的例子：

HTML

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" ng-model="data.repeatSelect">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>

APP.JS

angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
  singleSelect: null,
  availableOptions: [
    {id: '1', name: 'Option A'},
    {id: '2', name: 'Option B'},
    {id: '3', name: 'Option C'}
  ],
};

}]）;

您还可以使用ng-options，这是更推荐的。

关于textbox元素，请将这两个元素与ng-model相关联。

示例：

Answer 2

Javascript文件：

function ctrl($scope){
  $scope.rows = ['Paul','John','Lucie'];

  $scope.addRow = function(){
    $scope.rows.push($scope.addName);
    $scope.addName = "";
  };

}

HTML页面：

<body ng-controller="ctrl">
  <select>
    <option ng-repeat="row in rows" value="{{ row }}">{{ row }}</option>
  </select>
  <span class="input-append">
    <input id="add" type="text" placeholder="Another one ?" ng-model="addName" />
    <input type="submit" class="btn btn-primary" ng-click="addRow()" value="+ add" />
    </span>
</body>

请参阅：http://codepen.io/anon/pen/JdqqXj

使用Angular在选择选项中添加文本框

2 个答案:

HTML

APP.JS