对单选按钮选择更改AngularJS做些什么

Do something on radio button selection change AngularJS

本文关键字：AngularJS 做些什么 单选按钮 选择      更新时间：2023-09-26

我需要根据特定单选按钮组的选择刷新一些数据。

工作锤http://plnkr.co/edit/kZhsiU4pVpHhoscVkvMQ?p=preview

但我既不能得到ng更改，也不能得到ng点击来执行我的方法，该方法更新名称并使Hello World显示Hello"selection"。

$scope.updateValue = function(){
    $scope.name = $scope.data.myNumber;
  };

但我可以看到双向数据绑定是有效的，因此模型正在更新。

<span>You selected {{ data.myNumber }}</span>

顺便说一句：我尝试过的另一件事是观察模型值并执行我想做的事情，但这也不起作用——除了在页面加载时，watchcollection再也不会被触发。

plunker只是单选按钮选择问题的一个代表——我想在数据刷新中实现的更复杂。

任何帮助都将不胜感激。

不要修改name的$scope变量，而是修改object属性，因为它会保持引用的更改。

将代码的html部分更改为。。。

 <div ng-controller="MainCtrl">
      <p>Hello {{data.name}}!</p>
      <button ng-click="OpenModal('sm')">Enter Number</button>
      <br><br>
      <span>You selected {{ data.myNumber }}</span>
  </div>

以及您的javascript控制器。。。

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';
  $scope.data = {};
  $scope.OpenModal = function(size){
   var modalInstance = $modal.open({
            templateUrl: 'Modal.html',
            controller: 'ModalInstanceCtrl',
            windowClass: 'small-size-modal',
            size: size,
            scope: $scope
        });
  };
});
app.controller('ModalInstanceCtrl', function($scope, $modalInstance){
  $scope.ok = function(){
    $scope.data.name = $scope.data.myNumber;
    $modalInstance.close();
  };
  $scope.updateValue = function(){
    $scope.data.name = $scope.data.myNumber;
    $modalInstance.dismiss('submit');
  };
  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

正在使用Plunker。。

http://plnkr.co/edit/xL4b6imAkvwuNiuBuHxl?p=preview

虽然其他答案似乎是有效的，但对于复杂的数据通信，我会使用介于两者之间的服务。

由于您有两个独立的控制器，一个在主页中，另一个用于模态，并且它们的$scope不同，因此我倾向于使用service在两个控制器之间进行通信。您可以查看此问题以了解更多信息。

只需在模态上广播更改，然后在主控制器上侦听这些更改并将其反映在HTML上。

相关文章：