将 select 列表和输入文本框绑定在一起

Question

如何绑定select列表和输入框的值

<label class="control-label">Select city</label>
                <select class="form-control" name="cityName" ng-model="City">
                    <option  value="delhi">Delhi</option>
                    <option  value="mumbai">Mumbai</option>
                    <option  value="banglore">Banglore</option>
                    <option  value="Other">Other</option>
                </select>
                <div ng-if="city === 'Other'">
                    <label class="control-label">Specify city</label>
                    <input type="text" class="form-control" ng-model="city" >
                </div>
            </br>

在文本输入中输入的值应该可用于与 select 列表具有相同型号的控制器。如何实现这个功能。

Answer 1

您无法使用相同的型号名称实现这一点。因为，如果您更改文本框中的任何文本，ng-if 条件将为假，结果，您的文本框将隐藏。相反，尝试将不同的模型（例如 cityOther）分配给文本框，当您 post 来自控制器的数据时，检查模型中的城市值。如果city值为"Other"，则将cityOther的值赋值给city。这样，您将能够完成所需的输出。

Answer 2

这是我认为所期望的工作示例。仅供参考，其他位于 select 选项的底部。
另一方面，如果你想将它应用到许多组件，最好把它变成一个指令。
还要检查 ui-validate 当验证具有先决条件依赖项检查绑定以外的其他属性时，它会派上用场。

(function (angular) {
 'use strict';
 angular
  .module('wierdSelectApp', [])
  .controller('demoController', ['$scope', function ($scope) {

   /* constant to hold other city value, easy to do checks... */
   var OTHER_CITY = 'Other'
   /* cities fo user to select from.... */
   var cities = ['Mumbai',
    'Delhi',
    'Bengaluru',
    'Hyderabad',
    'Ahmedabad',
    'Chennai',
    'Kolkata',
    'Surat',
    'Pune',
    'Jaipur',
    'Lucknow',
    'Kanpur',
    'Nagpur',
    'Visakhapatnam',
    'Indore',
    'Thane',
    'Bhopal',
    'Patna',
    'Vadodara',
    'Ghaziabad',
    'Ludhiana',
    'Coimbatore',
    'Agra',
    OTHER_CITY];

   /* function to create the model to hold selected/specified city*/ 
   function createSelectionModel() {
    var obj = {
     selectedCity: null, // hold the selected city
     specifiedCity: null // hold the specified city
    };

    /* 
     returns the city user has selected or specified. 
     if the user has select a city from the drop-down other than OTHER, then
     the selected value will be returned. 
     else if OTHER was selected, the user specified city will returned.
    */
    obj.__defineGetter__("value", function () {
     return (!!this.selectedCity && this.selectedCity === OTHER_CITY) ? this.specifiedCity : this.selectedCity;
    });

    return obj;
   }

   /* attach cities and selection model to scope...  */
   function onLoad() {
    $scope.cities = cities;
    $scope.selection = createSelectionModel();
    $scope.OTHER_CITY = OTHER_CITY;
   }

   onLoad();

  }
  ]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="wierdSelectApp">
    <div ng-controller="demoController">
        <form name="myForm">
            <!-- dropdown select -->
            <div>
                <label for="selectedCity">Select city</label>
                <select name="selectedCity" ng-model="selection.selectedCity" ng-options="opt for opt in cities"></select>
            </div>

            <!-- other city to specify -->
            <div ng-if="!!selection.selectedCity && selection.selectedCity === OTHER_CITY">
                <label class="control-label">Specify city</label>
                <input type="text" class="form-control" ng-model="selection.specifiedCity" />
            </div>

            <hr />
            <!-- display selected value-->
            <div>Answer : {{selection.value}}</div>
        </form>
    </div>
</div>

将 select 列表和输入文本框绑定在一起

bind select list and input text box together

html

node.js

angularjs

angularjs-directive

mean-stack