radio button and array with angular js

Question

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.

Sreekanth · Accepted Answer · 2016-11-06 20:30:40Z

1

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>

edited Nov 6, 2016 at 20:30

answered Nov 6, 2016 at 19:15

Sreekanth

3,13014 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

nowaySync Over a year ago

thank you but with your code when i click on color it change value in "color.name color = color.name", i'd like to show only red, green or blue

Sreekanth Over a year ago

there was a miss earlier. fixed it in a bit after the post. it should work now.

nowaySync Over a year ago

with value="{{color.name}}" the <tt> "color=" not change, it must change for each radio button

nowaySync Over a year ago

i'd like show only one text with color selected not 3

Sreekanth Over a year ago

Modified the snippet.

|

Collectives™ on Stack Overflow

radio button and array with angular js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related