相同字段中的角度下拉和文本输入以及Angular数据绑定

Question

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

<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模型的输入值绑定到一个ng模型，但它似乎不起作用。 例如，如果用户选择Category：E，则键入：X和Number 2，Type Type应为"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;
      }
    });