AngularJs：ng-model不绑定到ng-checked for input type =" radio"，使用ng-repeat [英] AngularJs : ng-model not binding to ng-checked for input type="radio", using with ng-repeat

问题描述

我正在尝试使用ng-repeat指令和track by expression，以显示单选按钮，当我提交值附加到模型中时，当我使用模型中的值重新打开页面时，单选按钮不显示检查。

I am trying to use ng-repeat directive with track by expression, to show radio buttons, when I submit the value gets attached in the model and when I reopens the page using the values in model, the radio button does not show checked.

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

I have implemented same with plane string model + string values . But this time am trying with objects.

<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应该被检查。型号有：

As per above, I should have 4 radio buttons on the screen, I am able to select 1 and submit. And then when I again open it in my model the person have the right value which was saved thorough ng-value but still on UI i don't see the radio button as checked for name Ringo should be checked. Model have:

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

尝试过的解决方案

1. ng-checked表达式，虽然我读到ng-model和ng-checked
   不应该一起使用，理想情况下使用模型绑定它应该被chcked。


2. 解释我读过，ng-repeat没有正确渲染所以我试图强行渲染但是没有用。


3. 从模板中删除ng-checked仍然无法正常工作。


4. 按ng-repeat中的字符串值进行工作跟踪。在ng-options中它也适用于对象值，但是它不是输入元素而是选择元素

1. ng-checked expression , although I read that ng-model and ng-checked should not be used together, ideally using model binding it should be chcked.
2. explanationI read about ,ng-repeat is not rendering properly so i tried to re render forcefully but did not work.
3. Removed ng-checked from the template still did not work.
4. Track by works for string values in ng-repeat.In ng-options it worked for object values also, but then its not input element but a select element

有人帮助理解，当你重装或你已经拥有模型中的值，如何选择单选按钮

Someone help understand, when you reload or you already have the value in model,how the radio button be selected

	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>

会自动？我上面的所有尝试都没有用，我错过了什么。

automatically ? all my tries above are not working am i missing something.

推荐答案

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

You have some syntax errors, missing model values and some unnecessary markup. First, you can get rid of the ng-checked altogether. That will be handled automatically if you set your ng-model and ng-value properly. Since your objects are unique there's no need for track by.

使用AngularJS指令（例如 ng-value ）时，您不需要使用大括号来引用您的模型值。所以 ng-value ={{person}}变为 ng-value =person。

When using AngularJS directives (such as ng-value) you do not need to use braces to reference your model values. So ng-value="{{person}}" becomes ng-value="person".

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

You refer to myObj.person, but there doesn't appear to be a corresponding model value. Below is an edit of the code and markup you have provided showing that it really does work to use an object as the value for your radio buttons.

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>

这篇关于AngularJs：ng-model不绑定到ng-checked for input type =" radio"，使用ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！