javascript 同一字段中的 Angular 下拉和文本输入以及 Angular 数据绑定

Angular drop-down and text input in same field and Angular data-binding

提问by Muffin

Is it possible to create a field input in angularjs, which can take value from dropdown and also has custom input. So the following two input options should be one, and user can choose value from dropdown or write a custom value.

是否可以在 angularjs 中创建一个字段输入，它可以从下拉列表中获取值并且还具有自定义输入。所以以下两个输入选项应该是一个，用户可以从下拉列表中选择值或编写自定义值。

<input name="TypeCode" type="text" ng-model="sample"/>
  <select class="input-large input-large-altered " ng-model="sample">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
          <option value="E">E</option>
   </select>

Secondly I want to bind input value of several ng-models to one ng-model using input option, but it seems not working. For example in following form if user choose Category: E, Type: X and Number 2, Type Code should be "EX2"http://plnkr.co/edit/gONebPq3wFJiQemQeEnL

其次，我想使用输入选项将几个 ng-model 的输入值绑定到一个 ng-model，但它似乎不起作用。例如在以下表格中，如果用户选择类别：E，类型：X 和数字 2，类型代码应为"EX2"http://plnkr.co/edit/gONEbPq3wFJiQemQeEnL

<div class="row col-md-12">

    <div class="col-md-5">

      <label class="control-label col-md-4 ">Type Code</label>

      <div class="col-md-4">
        <input class="text-box input-large input-large-altered" name="TypeCode" type="text" ng-model="TypeCode" ng-readonly="true" value="{{Category}}+{{Type}}+{{Number}}"  />

      </div>
    </div>


    <div class="col-md-5">
      <label class="control-label col-md-4 ">Category</label>

      <div class="col-md-4">
        <select class="input-large input-large-altered " ng-model="Category">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
          <option value="E">E</option>
        </select>
      </div>
    </div>
  </div>

   <div class="row col-md-12">

    <div class="col-md-5">

      <label class="control-label col-md-4 ">Type</label>

      <div class="col-md-4">
        <select class="input-large input-large-altered " ng-model="Type">
          <option value="X">X</option>
          <option value="Y">Y</option>
          <option value="Z">Z</option>

        </select>
      </div>
    </div>


    <div class="col-md-5">
      <label class="control-label col-md-4 ">Number</label>

      <div class="col-md-4">
        <select class="input-large input-large-altered " ng-model="Number">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>

        </select>
      </div>
    </div>
  </div>

采纳答案by sylwester

please see here: http://plnkr.co/edit/YIQRFA3tjM4CtYI2Bn8U?p=preview

请看这里：http: //plnkr.co/edit/YIQRFA3tjM4CtYI2Bn8U?p=preview

<div class="row col-md-12">

    <div class="col-md-5">

      <label class="control-label col-md-4 ">Type Code</label>

      <div class="col-md-4">
        <input class="text-box input-large input-large-altered"
        name="TypeCode" type="text" 
        ng-model="TypeCode"    />

      </div>
    </div>

js:

js：

 var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
      $scope.updateTypecode = function() {
        var a = ($scope.Category) ? $scope.Category : "";
        var b = ($scope.Type) ? $scope.Type : ""
        var c = ($scope.Number) ? $scope.Number : ""
        $scope.TypeCode = a + b + c;
      }
    });