在控制器中更改后未选择单选按钮值答案

【问题标题】：Radio button value not selected after changing in controller在控制器中更改后未选择单选按钮值
【发布时间】：2018-05-28 22:21:57
【问题描述】：

在控制器中更新单选按钮的值后，我遇到了一个问题。它具有 Y/N 值，当我加载默认情况下它具有的信息时显示为“N”，但如果我更改为“是”，我会进行一些验证，我必须将其更改回“否”（我分配了该值在控制器中），但是在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

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您必须在视图中使用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】：

很抱歉，我错过了了解您的问题。代码如下，选中 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

【讨论】：

【解决方案3】：

我不确定这是否是正确的解释，但我认为值的更新速度如此之快，以至于 Angular 没有时间更新 UI。我有一个类似的问题，并通过添加 0.5 秒的延迟解决了这个问题。

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

工作Plunker

【讨论】：