在角度中使用 ui-select 进行绑定答案

【问题标题】：Binding using ui-select in angular在角度中使用 ui-select 进行绑定
【发布时间】：2016-11-26 19:22:34
【问题描述】：

我在 Angular 中使用 ui-select 编写了一个小程序，似乎它们与 ng 模型有一些“错误”（对我来说，它有一些“奇怪”的行为），我无法绑定在来自 .js 控制器的 ng-model。

这是我的 html 代码：

<body ng-controller="mainController">
<p>SelectedName: {{test.selectedContract.name}}</p>
<p>Selected: {{test.selectedContract}}</p>

<ui-select ng-model="test.selectedContract">
  <ui-select-match>
    {{$select.selected.name}} - {{$select.selected.value}}    
</ui-select-match>

<ui-select-choices repeat="contract in (contracts | filter: {name: $select.search} ) track by contract.name">
    {{contract.name}} - {{contract.value}}    
</ui-select-choices>
</ui-select>

<p> selectedFromJS = {{mySelected}} </p>
<p> selectedNameFromJS = {{mySelected2}} </p>

Selected 和 SelectedName 这两个变量似乎是正确的，如果我想在控制器中操作它，我可以在 html 中查看 selectecContract，但我失败了。

这是我的控制器中的绑定：

$scope.test = {};
$scope.test.selectedContract = {};

$scope.mySelected = $scope.test.selectedContract
$scope.mySelected2 = $scope.test.selectedContract.name

最后，这是我的代码：http://plnkr.co/edit/WxMXD8yptwfsr80hJJWJ?p=preview

如您所见，最后两个变量 selectedFromJS 和 selectedNameFromJS 不起作用，也没有显示任何内容。

您能否告诉我如何正确进行绑定以及如何操作控制器中的选定项目。

谢谢！

【问题讨论】：

标签： angularjs ui-select

【解决方案1】：

控制器加载一次。数据正在绑定到test.selectedContract。这就是您创建自己的手表的方式。当附加到 $scope 的某些值发生更改时，$watch 服务可以帮助您运行一些代码。

请尝试：

  $scope.$watch('test.selectedContract', function() {
       $scope.mySelected = $scope.test.selectedContract
       $scope.mySelected2 = $scope.test.selectedContract.name
  });

【讨论】：

谢谢，它有效，我认为 $watch 是这里最好的解决方案

【解决方案2】：

您使用$watch解决您的问题：

如果你想在 $digest 被调用时得到通知，你可以注册一个不带监听器的 watchExpression 函数。（准备好多次调用您的 watchExpression，因为如果检测到更改，它将在单个 $digest 循环中执行多次。）

因此，您需要为变量test.selectedContract 实现watchExpression，如下所示：

$scope.$watch('test.selectedContract', function(newVal, oldVal){
   $scope.mySelected = newVal
   $scope.mySelected2 = newVal.name;
});

这里是一个实现了watchExpression 的 plunkr：http://plnkr.co/edit/6Z6Xes02C42bojHfDlnl?p=preview

如果您想了解更多关于$digest 循环和$watch 表达式的信息，请查看此问题的前两个答案：How do I use $scope.$watch and $scope.$apply in AngularJS?

【讨论】：

【解决方案3】：

它完全按预期工作。

在控制器中，您分配给mySelected 和mySelected2 的值不是对对象的引用，因此您想到的binding 不存在，

$scope.mySelected = $scope.test.selectedContract
$scope.mySelected2 = $scope.test.selectedContract.name

您可以通过多种方式使其工作

1 带功能

JS

$scope.mySelected = function(){
  $scope.test.selectedContract;
}

HTML

<p> selectedFromJS = {{mySelected()}} </p>

2 分配参考

JS

$scope.mySelected2 = $scope.test

HTML

<p> selectedNameFromJS = {{mySelected2.selectedContract.name}} </p>

在引用的情况下，mySelected2 是对test 的引用，因为它是一个非常简单的对象

3 使用 ui-select `on-select` 事件

JS

$scope.updateMySelect = function(){
  $scope.mySelected = $scope.test.selectedContract;
  $scope.mySelected2 = $scope.test.selectedContract.name
}

HTML

<ui-select ng-model="test.selectedContract" on-select="updateMySelect()">

【讨论】：

1 带功能

JS

HTML

2 分配参考

JS

HTML

3 使用 ui-select on-select 事件

JS

HTML

3 使用 ui-select `on-select` 事件