, когда переключатель находится в ng-repeat, когда я нажимаю на переключатель, активируется div?

Question

Здесь, когда я нажимаю на переключатель, следующий div должен быть отключен, если установленный переключатель установлен равным sj. Но здесь его не работает, если я использую ng-repeat для переключателя, тот же работает, если его static.Could any one help я из какой ошибки я сделал здесь?

<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> 

Answer 1

Пар вещей пропущены

1. Изменения Вы переменная ng-model области, чтобы указать его родитель как ng-model="$parent.content" вместо ng-model="content", потому что нг-повтор создает дочерний объем от текущей области.
2. Использовать ng-value вместо атрибута привязки области привязки к атрибуту области видимости value.

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

Answer 2

вы можете проверить код в этом

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

 
app.controller('MyCtrl', function ($scope) { 
 
    $scope.contentshow=true; 
 
    $scope.color = [{ 
 
     "name": "sj" 
 
    }, { 
 
     "name": "asfdsaf" 
 
    }, { 
 
     "name": "sdfsadf" 
 
    }, { 
 
     "name": "sdf" 
 
    }]; 
 
    
 
    $scope.showsj=function(radioshow){ 
 
     if(radioshow.name==='sj'){ 
 
       $scope.contentshow=false; 
 
     } 
 
     else{ 
 
       $scope.contentshow=true; 
 
     } 
 
    }; 
 
})

.done-true { 
 
    text-decoration: line-through; 
 
    color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> 
 
<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" ng-click="showsj(s)">{{s.name}} 
 
       <br/> 
 
      </div> 
 
     </form> 
 
     <div class="wrapper"> 
 
      <p ng-show="contentshow">This is the first content!</p> 
 
     </div> 
 
    </div> 
 
</div>