ng-checked does not work

Question

ng-checked does not work

Navigation

#1 by (1 votes)

0

I have the following:

$scope.query = {};
$scope.schemas = [{field:'test1'},{field:'test2'},{field:'test3'}] 

<div ng-repeat="(indexX,schema) in schemas">
  <input type="radio" ng-model="query[indexX].test" value="{{schema.field}}"/>

  <input type="checkbox" value="{{schema.field}}" 
          ng-init="query[indexX][column.field].check=false" 
          ng-model="query[indexX][schema.field].check" 
          ng-checked="query[indexX].test"/> 
</div>

The problem is that when I give the radio all the checkboxes are selected

angularjs

asked by sirdaiz 09.02.2017 в 10:02

source

1 answer

Convert date from xml to json to save in mongodb database modeling

score 1 · Accepted Answer

So that you can select only one of the radio you must have a common name in all of them. Otherwise, as you are pressing one after the other, the radio will be activated and it will remain that way permanently.

var stackApp = angular.module('stackApp', []);
stackApp
  .controller('Ejemplo',
    ['$scope', function($scope) {
      $scope.test = 'OK';
      $scope.query = {};
      $scope.schemas = [
        { field:'test1' },
        { field:'test2' },
        { field:'test3' }
      ];
    }]
);
angular.bootstrap(document, ['stackApp']);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form ng-controller="Ejemplo">
  <div ng-repeat="(indexX,schema) in schemas">
    <p>{{test}} ({{indexX}})</p>
    <input name="seleccion" type="radio"
      ng-model="query[schema.field].test"
      ng-value="true"/>
    <input type="checkbox"
      ng-value="schema.field"
      ng-init="query[schema.field].test = false"
      ng-model="query[schema.field].test"
      ng-checked="query[schema.field].test"/>
  </div>
  <pre>
    {{query | json}}
  </pre>
</form>

<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.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://bentorfs.github.io/angular-bootstrap-multiselect/bower_components/angular-bootstrap-multiselect/dist/angular-bootstrap-multiselect.min.js"></script>

I have added a dump of the state of the application so you can debug what is happening and decide if it should happen.