AngularJS單選按鈕

我嘗試使用單選按鈕做this。我從角度開始，我無法將相同的動作應用於無線電。AngularJS單選按鈕

<!DOCTYPE html>

<html ng-app="angularjs-starter">

<body ng-controller="MainCtrl"> 
<ul class="module_list"> 
    <li ng-repeat="module in modules"> 
    <div class="span4 module_card" ng-class="{ checked : isChecked }" ng-controller="CheckedController"> 
    <input id="{{module.title}}" type="checkbox" class="custom_checkbox" ng-model="isChecked"><label class="title" for="{{module.title}}">{{module.title}}</label> 
     <p>{{module.description}}</p> 
     <p><a class="btn btn_addlearning" ng-class="getCardButtonClass(module)" ng-click="addToMyLearning(module)">{{createButtonText(module)}}</a></p> 
    </div> 
    </li> 
</ul>

感謝您的幫助！

來源

2015-05-19 DADA5000

如果您不使用'type =「radio」 '，如果你想使用單選按鈕，或者你想使用複選框作爲單選按鈕？ – Vatsal

工作的例子 - https://jsfiddle.net/Shital_D/g8ksad4k/1/

<div ng-controller="MainCtrl"> 
    <ul class="module_list" ng-controller="CheckedController"> 
     <li ng-repeat="module in modules"> 
      <div class="span4 module_card" ng-class="{ checked : isChecked == module.title , unChacked: isChecked != module.title}"> 
       <input id="{{module.title}}" type="radio" name="radio" class="custom_checkbox" ng-click="checked(module.title)" ng-value="module.title"> 
       <label class="title" for="{{module.title}}">{{module.title}}</label> 
       <p>{{module.description}}</p> 
       <p>{{isChecked}}</p> 
       <p><a class="btn btn_addlearning" ng-class="getCardButtonClass(module)" ng-click="addToMyLearning(module)">{{createButtonText(module)}}</a> 
       </p> 
      </div> 
     </li> 
    </ul> 
</div> 

var app = angular.module('myApp', []); 
app.controller('MainCtrl', function ($scope) { 
    $scope.modules = [{ 
     title: 'Module 1', 
     description: 'Description 1' 
    }, { 
     title: 'Module 2', 
     description: 'Description 2' 
    }, { 
     title: 'Module 3', 
     description: 'Description 3' 
    }]; 
}); 

app.controller('CheckedController', function ($scope) { 
    $scope.isChecked = ''; 
    $scope.checked = function(title) { 
     $scope.isChecked = title; 
}

來源

2015-05-19 08:14:07 User2

它適合你嗎？ – User2

謝謝！它可以工作，但是當收音機未選中時，'已檢查'類不會被刪除。你有這個解決方案嗎？ – DADA5000

你有代碼鏈接，我可以檢查它的代碼？ – User2

在你app.js，嘗試加入到器isChecked你的模塊對象，然後在NG-重複使用它作爲module.isChecked

$scope.modules = [ 
    { title: 'Module 1', description: 'Description 1', isChecked: false }, 
    { title: 'Module 2', description: 'Description 2', isChecked: false }, 
    { title: 'Module 3', description: 'Description 3', isChecked: false } 
];

來源

2015-05-19 07:52:39 esh

<div class="form-group"> 
      <label>Type of ad <b class="text-danger">*</b></label><br> 
      <input type="radio" name="typeofAd" value="sell" ng-model="product.typeofAd"> I want to sell  
      <input type="radio" name="typeofAd" value="buy" ng-model="product.typeofAd"> I want to buy 
      </div>

參考鏈接 https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms

來源

2015-09-21 20:32:37

AngularJS單選按鈕

回答

相關問題