我的控制器在angularjs中有一个数组
app.controller('player', function($scope) {
$scope.players = [
{
"id":3,
"name":"Nadal",
},
{
"id":4,
"name":"Federer"
}
]
});
在我的HTML中，我有一个带有dropdown和textbox的HTML。
<html ng-app="pdl">
<body ng-controller="player">
<input type="text" id="name" value=""/>
<select name="id">
<option ng-repeat="player in players" value="{{player.id}}">{{player.id}}</option>
</select>
</body>
</html>
当我从下拉列表中选择一个选项时，我想用'名称'更新输入
绑定选择和输入相同的ngModel：
angular.module('pdl', []).controller('player', function($scope) {
$scope.players = [{
"id": 3,
"name": "Nadal",
}, {
"id": 4,
"name": "Federer"
}]
});<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<div ng-app="pdl" ng-controller="player">
<input type="text" ng-model="player.name" />
<select ng-model="player" ng-options="player as player.name for player in players">
</select>
</div>并使用ngOptions选择框。
上面的解决方案有效，但如果要在写入后修改输入值，则会中断。在上面的示例中，更改单词Nadal，并且选择也会更改，因为它们绑定到相同的值。
如果想要修改输入的值并且您不想绑定到同一个ngModel，则可以在select上使用ng-change，并将要在输入中显示的值传递给它。
在这个例子中，我在选择中插入“ng-change”语句...
ng-change="change(model.action)"
并在控制器中我更新输入的范围
$scope.change = function (str) {
$scope.model.action = str;
};
每次更新选择时，输入也会更新，但您可以修改输入值而不触及选择，因为它们的绑定方式不同。