在 angular 中使用 ui-select 进行绑定

Question

我在 angular 中使用 ui-select 写了一个小程序，看起来他们 "bugs" 有一些 ng 模型（对我来说，它有一些"strange" 行为）并且我无法从 .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 不起作用，也没有显示任何内容。

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

谢谢！

Answer 1

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

请尝试：

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

Answer 2

您使用 $watch:

解决了您的问题

If you want to be notified whenever $digest is called, you can register a watchExpression function with no listener. (Be prepared for multiple calls to your watchExpression because it will execute multiple times in a single $digest cycle if a change is detected.)

所以，你需要为变量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?

Answer 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()">

在 angular 中使用 ui-select 进行绑定

Binding using ui-select in angular

angularjs

ui-select

1 具有功能

JS

HTML

2 分配引用

JS

HTML

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

JS

HTML

在 angular 中使用 ui-select 进行绑定

Binding using ui-select in angular

angularjs

ui-select

1 具有功能

JS

HTML

2 分配引用

JS

HTML

3 使用 ui-select on-select 事件

JS

HTML

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