当一个单选按钮在 ng-repeat 中时，当我点击单选按钮时，div 将被启用? [英] when a radio button is in ng-repeat when i click on radio button the div will be enable?

问题描述

在这里，当我单击单选按钮时，如果选中的单选按钮等于 sj，则应禁用以下 div.帮我看看我在这里犯了什么错误?

<div class="wrap" ng-controller="MyCtrl"><h1>你好！</h1><p>按单选按钮更改内容！</p><表格><div ng-repeat="s in color"><input id="first" type="radio" name="content" ng-model="content" value="s.name">{{s.name}}<br/></div></表单><div class="wrapper"><p ng-show="content == 'sj'">这是第一个内容！</p>

<脚本>var app = angular.module('plunker', []);app.controller('MyCtrl', function($scope) {$scope.color = [{"name":"sj"},{"name":"asfdsaf"},{"name":"sdfsadf"},{"name":"sdf"}];});

解决方案

遗漏了几件事

1. 更改您的 ng-model 范围变量以指向其父级，例如 ng-model="$parent.content" 而不是 ng-model="content"，因为 ng-repeat 从当前作用域创建子作用域.
2. 使用 ng-value 而不是 value 属性将范围变量绑定到它.

HTML

<div ng-repeat="s in color"><input id="first" type="radio" name="content" ng-model="$parent.content" ng-value="s.name">{{s.name}}<br/>

</表单>

工作 Plunkr

Here when i click on radio button the following div should be disable if the checked radio button is equals to sj.But here its not working if i use ng-repeat for radio button same is working if its static.Could any one help me out what is the mistake i have done here?

<div ng-app="plunker">
  <div class="wrap" ng-controller="MyCtrl">
    <h1>Hello there!</h1>
    <p>Push the radio buttons to change the content!</p>
    <form> 
      <div ng-repeat="s in color">
      <input id="first" type="radio" name="content" ng-model="content" value="s.name">{{s.name}}
      <br/></div>
    </form>

    <div class="wrapper">
      <p ng-show="content == 'sj'">This is the first content!</p>
    </div>
  </div>
</div>

<script>
var app = angular.module('plunker', []);

app.controller('MyCtrl', function($scope) {
    $scope.color = [{"name":"sj"},{"name":"asfdsaf"},{"name":"sdfsadf"},{"name":"sdf"}];
});

</script>

解决方案

Couple of things are missed

1. Change you ng-model scope variable to point its parent like ng-model="$parent.content" instead of ng-model="content", because ng-repeat creates child scope from current scope.
2. Use ng-value instead of value attribute for binding scope variable to it.

HTML

<form>
    <div ng-repeat="s in color">
        <input id="first" type="radio" name="content" ng-model="$parent.content" ng-value="s.name">{{s.name}}
        <br/>
    </div>
</form>

Working Plunkr

这篇关于当一个单选按钮在 ng-repeat 中时，当我点击单选按钮时，div 将被启用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！