gpt4 book ai didi

javascript - 指令中选择输入的两种方式绑定(bind)不起作用

转载 作者:行者123 更新时间:2023-11-30 12:26:32 26 4
gpt4 key购买 nike

我已经为选择输入创建了一个指令来选择一个 userId。模型从指令绑定(bind)到 View 的其余部分。但是,当我从 Controller 设置 id 时,它似乎没有绑定(bind)到指令中的选择输入。

Controller :

app.controller('MainCtrl', function($scope) {
// set userId to willem's Id
$scope.userId = 3;
});

指令:

app.directive('selectUser', function() {
return {
restrict: 'E',
scope: {
ngModel: '='
},
controller: function($scope) {
$scope.users = [{
"id": 1,
"name": 'Tupac'
}, {
"id": 2,
"name": 'Biggie'
}, {
"id": 3,
"name": 'Willem'
}];
},
templateUrl: 'directive.html'
};
});

index.html

  <body ng-controller="MainCtrl">
users:
<select-user ng-model="userId"></select-user>

userId = {{userId}}
</body>

指令.html

<select class='form-control focus' ng-model="ngModel">
<option value="">all users</option>
// doesn't bind from the controller. Supposed to show willem, instead of all users to start with.
<option ng-Repeat="user in users" value="{{user.id}}">{{user.name}}</option>
</select>

工作示例:http://plnkr.co/edit/c7eyoB

最佳答案

你应该使用 ngOptions :

<select class='form-control focus' ng-model="ngModel" ng-options="user.id as user.name for user in users">
<option value="">all users</option>
</select>

然后绑定(bind)将起作用。 参见updated plnkr


编辑,关于评论中的以下问题:

could you please explain, why it is not working with ng-repeat?

您可以通过以下方式获得相同的视觉效果:

<select class='form-control focus' ng-model="ngModel">
<option value="">all users</option>
<option ng-repeat="user in users" value="{{user.id}}" ng-selected="user.id === ngModel">{{user.name}}</option>
</select>

即我们添加了 ng-selected="user.id === ngModel"

但这有一些缺点。首先,您正在创建不需要的隔离范围。而且,绑定(bind)到选项的值是字符串,即您实际上会选择 '1''2''3' 123

关于javascript - 指令中选择输入的两种方式绑定(bind)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29195511/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com