javascript - 同一字段中的 Angular 下拉菜单和文本输入以及 Angular 数据绑定(bind)

Question

是否可以在 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>

其次，我想使用输入选项将多个 ng-model 的输入值绑定(bind)到一个 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>

Answer 1

请看这里: 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:

 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;
      }
    });