CODEWITHSUNDEEP
angularjsarrays
nowaySync
nowaySync

Reputation: 115

radio button and array with angular js

i have this controller with name of three color.

<script>
    angular.module('radioExample', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.color = [{
          name: "Red" 
        },
        {
          name: "green" 
        },
        {
           name: "Blue" 
        }
        ];

      }]);
  </script>

I'd like to create 3 radio button who show the correspondig color and show on screen

<label>
  <input type="radio" ng-model="color.name" value="red"> Red
  <tt>color = {{color.name }}</tt>
</label>

i desire take the value directly from array and not from value. how i can do?

i have try with value="color.name" but don't run.

thank you.

Upvotes: 0

Views: 2397

Answers (1)

Sreekanth
Sreekanth

Reputation: 3130

All you need is a ng-repeat. here is a working sample.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.colorName = "Blue";
    $scope.colors = [{
      name: "Red"
    }, {
      name: "green"
    }, {
      name: "Blue"
    }];

  }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <label ng-repeat="color in colors">
      <input type="radio" ng-model="$parent.colorName" ng-value="color.name" name="color-picker" />{{color.name}}
    </label>
    <tt>color = {{colorName}}</tt>
  </div>
</div>

Or else using controllerAs Syntax you could do this.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.colorName = "Blue";
    $scope.colors = [{
      name: "Red"
    }, {
      name: "green"
    }, {
      name: "Blue"
    }];

  }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController as sc">
    <label ng-repeat="color in colors">
      <input type="radio" ng-model="sc.colorName" ng-value="color.name" name="color-picker" />{{color.name}}
    </label>
    <tt>color = {{sc.colorName}}</tt>
  </div>
</div>

Upvotes: 1

Related Questions