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

Question

如何将选择列表和输入框的值绑定在一起。

<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>

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

Answer 1

您无法使用相同的型号名称来实现。因为，如果您更改文本框中的任何文本，ng-if 条件将为 false，因此，您的文本框将隐藏。而是尝试将不同的模型（例如 cityOther）分配给文本框，当您从控制器发布该数据时，检查模型中的城市值。如果 city 值为“Other”，则将 cityOther 的值分配给 city。这样，您将能够完成所需的输出。

Answer 2

这是一个我认为预期的工作示例。仅供参考，其他位于选择选项的底部。
另一方面，如果您想将此应用于多个组件，最好将其设为指令。
还要检查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>