更改控制器后未选择单选按钮值

时间:2017-12-14 18:30:09

标签: javascript angularjs

在控制器中更新其值后,我遇到了单选按钮的问题。它具有Y / N值,当我加载它默认显示的信息时,显示了N'但是如果我改为YES,我会做一些验证,我必须将它改回NO (我在控制器中分配了值),但是未选择html,实际上没有一个

<div ng-app="app" ng-controller="MainCtrl">
    <label class="radio-inline">
      <input type="radio" name="radioAceptada" ng-model="accepted" value="Y" ng-change="changeValue()">Yes
    </label>
    <label class="radio-inline">
      <input type="radio" name="radioAceptada" ng-model="accepted" value="N" ng-change="changeValue()">No
    </label>
  </div>

Plunker with example

3 个答案:

答案 0 :(得分:0)

我不确定这是否是正确的解释,但我认为值的更新速度非常快,以至于角度没有时间更新UI。我遇到了类似的问题并通过添加0.5秒的延迟来解决问题。

  $scope.changeValue = function() {
    if ($scope.accepted === 'Y') {
      alert("Error");
    $timeout(function() { 
      $scope.accepted = 'N';
    }, 500);
    }
  };

工作Plunker

答案 1 :(得分:0)

您必须在视图中使用ng-value并为其指定返回功能。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-app="app" ng-controller="MainCtrl">
    <label class="radio-inline">
      <input type="radio" name="radioAceptada0" ng-model="accepted" ng-value='change()' >Yes
    </label>
    <label class="radio-inline">
      <input type="radio" name="radioAceptada1" ng-model="accepted" value='N 'ng-value="N" >No
    </label>
  </div>
</body>

</html>

你的控制器:

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
  $scope.accepted = 'N';
  $scope.change=function(){
    if(validation is apply )
    retrun 'Y';
    else 
    {
      alert("somting you want show");
      return 'N';
    }


      alert("x")
      return 'Y';
  }

});

答案 2 :(得分:-1)

对不起,我很想念你的问题。这是代码,选择Y复选框后选择N,

  <input type="radio" name="rdly" ng-model="mdly" value="Y" ng-change="changeValue(mdly)">Yes

  <input type="radio" name="rdln" ng-model="mdln" value="N" ng-change="changeValue(mdln)">No

您必须指定不同的名称才能工作。

$scope.mdln = 'N';
  $scope.changeValue = function() {
    if ($scope.mdly === 'Y') {         
            alert('Change back to N');          
            $scope.mdly = '';   
            $scope.mdln = 'N';
    }       
  };

我对我的JSfiddle进行了更改:Here