时间戳

首页 > 解决方案 > AngularJs：ng-model 没有绑定到 ng-checked for input type="radio"，与 ng-repeat 一起使用

javascript - AngularJs：ng-model 没有绑定到 ng-checked for input type="radio"，与 ng-repeat 一起使用

问题描述

我正在尝试使用 ng-repeat 指令和表达式跟踪来显示单选按钮，当我提交值附加到模型中并且当我使用模型中的值重新打开页面时，单选按钮未显示选中。

我已经用平面字符串模型 + 字符串值实现了相同的功能。但这次我尝试使用对象。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
    <form name="myForm">
        <p>New TRY</p>
        <ul>
            <li ng-repeat="i in peopleNew.person">
                <label>
            {{i}}
                    <input type="radio" ng-model="peopleServer.person"
                           name="same" ng-value="i" />
                </label>  
            </li>
        </ul>
    </form>
<div>

JS代码

 angular.module('app', [])
  .controller('MyCtrl', ($scope) => {
  $scope.peopleNew ={
   person: {
      "name": "Ringo",
      "id": "R",
     "subj": "Sci"
    } 
  }
   $scope.peopleServer= {
   person: {"name":"Ringo"}
   }
  });

如上所述，我应该在屏幕上有 4 个单选按钮，我可以选择 1 并提交。然后，当我再次在我的模型中打开它时，该人具有正确的值，该值已被彻底保存ng-value但仍在 UI 上，我没有看到应检查名称 Ringo 的单选按钮。型号有：

 $scope.peopleServer= {
    person: {name:"Ringo"}
   }

尝试过的解决方案

  1. ng-checked expression ，虽然我读到 ng-model 和 ng-checked 不应该一起使用，理想情况下使用模型绑定它应该被 chcked。
  2. 解释我读到的，ng-repeat 没有正确渲染，所以我尝试强制重新渲染，但没有奏效。
  3. 从模板中删除 ng-checked 仍然无效。
  4. Track by 适用于 ng-repeat 中的字符串值。在 ng-options 中，它也适用于对象值，但它不是输入元素，而是选择元素

有人帮助理解，当您重新加载或您已经拥有模型中的值时，如何选择单选按钮

	angular.module('app', [])
  .controller('MyCtrl', ($scope) => {
  $scope.peopleNew ={
   person: {
      "name": "Ringo",
      "id": "R",
     "subj": "Sci"
    } 
  }
  //uncomment for testing. 
   $scope.peopleServer= {
   person: {"name":"Ringo"}
   }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
	<form name="myForm">
		<p>New TRY</p>
		<ul>
			<li ng-repeat="i in peopleNew.person">
				<label>
            {{i}}
                    <input type="radio" ng-model="peopleServer.person"
                           name="same" ng-value="i" />
				</label>  
			</li>
		</ul>
    </form>
<div>

自动地 ？我上面的所有尝试都不起作用我错过了什么。

标签： javascriptangularjshtmlradio-button

解决方案

您有一些语法错误、缺少模型值和一些不必要的标记。首先，你可以完全摆脱ng-checked。如果您设置正确，ng-model这将自动处理。ng-value由于您的对象是独一无二的，因此不需要track by.

当使用 AngularJS 指令（例如ng-value）时，您不需要使用大括号来引用您的模型值。就这样ng-value="{{person}}"变成了ng-value="person"。

您指的是myObj.person，但似乎没有相应的模型值。下面是您提供的代码和标记的编辑，显示使用对象作为单选按钮的值确实有效。

angular.module('app', [])
  .controller('MyCtrl', ($scope) => {
    $scope.people = [{
      name: "John",
      id: "J"
    }, {
      name: "Paul",
      id: "P"
    }, {
      name: "George",
      id: "G"
    }, {
      name: "Ringo",
      id: "R"
    }];
    $scope.myObj = {
      person: $scope.people[1]
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
  <form name="myForm">
    <p>Decisions</p>
    <ul>
      <li ng-repeat="person in people">
        <label>
            {{ person.name }}
            <input type="radio" ng-model="myObj.person"
                   name="sameName" ng-value="person" />
        </label>
      </li>
    </ul>
  </form>
  <div>
    {{ myObj.person }}
  </div>
</div>

推荐阅读