Question

我在使用angularJS单选按钮时遇到问题。我正在使用材料设计框架。我对角度很新。

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

    });
}])

我的改变没有解雇，我的$ 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 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>

这样的单选按钮对我来说很好用

参考链接 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单选按钮无法正常工作

4 个答案: