單選按鈕和角js陣列

Question

我有這個控制器與三種顏色的名稱。

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

     }]); 
    </script> 

我想創建三個單選按鈕誰顯示correspondig顏色在屏幕上顯示

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

我希望直接從陣列而不是從值取值。我該怎麼辦？

我嘗試使用value =「color.name」，但不運行。

謝謝。

Answer 1

所有你需要的是一個ng重複。這裏是一個工作示例。

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>

否則使用controllerAs語法，你可以做到這一點。

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>