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

时间:2017-01-11 09:31:25

标签: angularjs node.js html5 angularjs-directive mean-stack

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

Get-ADUser -property * -filter * | % {Get-ADPrincipalGroupMembership -Identity $_.SamAccountName | Select-Object name}

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

2 个答案:

答案 0 :(得分:1)

使用相同的型号名称无法实现。因为,如果更改文本框中的任何文本,ng-if条件将为false,因此,您的文本框将隐藏。而是尝试将不同的模型(对于Ex.cityOther)分配给文本框,当您从控制器发布该数据时,请检查模型中的城市值。如果城市值为"其他",则将cityOther的值分配给city。这样,您就可以完成所需的输出。

答案 1 :(得分:0)

以下是我认为期待的一个工作示例。 FYI OTHER位于选择选项的底部。
另外,如果要将其应用于多个组件,请将其更好地转换为指令 另外检查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>