使用ui-select绑定角度

时间：2016-11-26 19:22:34

标签： angularjs ui-select

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

这是我的HTML代码：

<?php
$term_list = wp_get_post_terms( get_the_ID(), 'type', array( "fields" => "names" ) );
$type_seperated = implode('/', $term_list);
if ( ! empty( $term_list ) ) : ?>
    <?php echo mb_strimwidth($type_seperated(), 0, 28, '...'); ?>
<?php else : ?>
    <?php _e( 'N/A', 'text-domain' ); ?>
<?php endif; ?>

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

这是我控制器中的绑定：

<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>

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

正如您所看到的，最后两个变量selectedFromJS和selectedNameFromJS不起作用，并且没有显示任何内容。

您能告诉我如何正确地进行装订，以及如何操作控制器中的所选项目。

谢谢！

3 个答案:

答案 0 :(得分：1)

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

请尝试：

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

答案 1 :(得分：0)

您可以使用$watch：

解决问题
  

如果您想在每次调用$ digest时收到通知，您可以注册一个没有监听器的watchExpression函数。 （准备多次调用watchExpression，因为如果检测到更改，它将在单个$摘要周期中执行多次。）

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

$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?

答案 2 :(得分：0)

它完全符合预期。

在控制器中，您为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()">
相关问题
最新问题