angularJS 单选按钮不起作用

Question

我在与 angularJS 单选按钮通信时遇到问题。我正在使用 material 设计框架。我是 angular.

的新手

HTML

<div ng-controller="MainCtrl as ctrl">
    <md-radio-group class="user-type">
        <div layout="row" layout-sm="column" layout-align="space-between" layout-align-sm="space-around center">
            <md-radio-button ng-model="userType" value="prospective" name="user_type" ng-change='newValue(value)'>Prospective Patient</md-radio-button>
            <md-radio-button ng-model="userType" value="patient" name="user_type" ng-change='newValue(value)'>Patient</md-radio-button>
            <md-radio-button ng-model="userType" value="caregiver" name="user_type" ng-change='newValue(value)'> Caregiver </md-radio-button>
            <md-radio-button ng-model="userType" value="doctor" name="user_type" ng-change='newValue(value)'>Doctor</md-radio-button>
        </div>
    </md-radio-group>
</div>

JS

.controller('MainCtrl', ['$scope', function($scope) {
    var self = this;

    $scope.newValue = function(value) {
        console.log(value);
    };

    $scope.$watch('userType', function(value){
        if(value == "patient"){
            console.log(value);
            self.showPatientStepTwo = true;
        }else{
            console.log(value);
            self.showPatientStepTwo = false;
        }

    });
}])

我的 ng-change 没有触发，我的 $watch 也没有工作。谁能找到我哪里出错了？我无法在我的控制器和视图之间进行通信！

Answer 1

当您使用控制器作为语法时，您应该绑定到它而不是范围。我认为 md-radio-button 指令正在创建一个子作用域，它把事情搞砸了，但如果没有该指令就很难重现。

这是模型的 plunker，点击绑定到 ctrl 而不是 $scope：http://plnkr.co/edit/fSTBDAMZLFKJgRD4br9K?p=preview

无线电更改为输入，但引用了 ctrl：

<input type="radio" ng-model="ctrl.userType" value="prospective" name="user_type" class="user-type-rdo md-warn md-hue-2" ng-change='ctrl.newValue(value)'>Prospective Patient

并且控制器已更新以将 newValue 函数移出 $scope:

.controller('MainCtrl', ['$scope', function($scope) {
    var self = this;

    this.newValue = function(value) {
        console.log(value);
    };

    $scope.$watch(function(){return self.userType;}, function(value){   
        if(value == "patient"){
            console.log(value);
            self.showPatientStepTwo = true;
        }else{
            console.log(value);
            self.showPatientStepTwo = false;
        }

    });
}])

newValue 函数记录未定义 - 不确定您在那里尝试做什么，但如果您需要该值，可以在 newValue 函数中使用 self.userType。

Answer 2

第一件事：您不需要在 ea 上声明 ng-model。 angular-material 使用单选组时的单选按钮，根据单选按钮的 angular-material docs。

第二件事是，当您使用 controllerAs 语法 See controllerAs Reference.

构建控制器时，标准 $scope 事件的行为有点不同

function MainController($scope, $log) {
   var vm = this;
   vm.title = 'Some Title';
   vm.showPatientStepTwo = false;

   // does not work
   $scope.$watch('userType', function(newVal, oldVal){
        // do work
   });

   // works  
   $scope.$watch('vm.userType', function(newValue, oldValue) {
       // do work with newValue
   });

   // also works
   $scope.$watch(function() {
      return vm.userType;
   }, function(newValue, oldValue) {
      vm.showPatientStepTwo = newValue === 'patient';
   });
}

工作插件：http://plnkr.co/edit/Dth67cQJKarwt3NiE9yp

Answer 3

<div class="form-group">
            <label>Type of ad <b class="text-danger">*</b></label><br>
            <input type="radio" name="typeofAd" value="sell" ng-model="product.typeofAd">  I want to sell       
            <input type="radio" name="typeofAd" value="buy" ng-model="product.typeofAd"> I want to buy
          </div>

单选按钮这种方式适合我

参考link https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms

Answer 4

您需要添加 ng-model 和 ng-change 事件，如下所示。

<md-radio-group ng-model="selectedVal" ng-change="showSelected()">

并且在您的控制器中，您可以定义如下函数。 $scope.showSelected= function(){ console.log($scope.selectedVal); }

angularJS 单选按钮不起作用

angularJS radio buttons not functioning

radio-button

angularjs

angularjs-directive