我想在AngularJS中设置一个单选按钮

Randy 发表于 Dev

兰迪

我是StackOverflow的新手，所以如果没有提供足够的信息，我深表歉意。我有一个与AngularJS一起排序的书单。我有4个单选按钮，可以按类别很好地过滤结果，但是我希望默认情况下选择“ SciFi”。我无法获得我在stackoverflow中找到的示例。

这些是我的4个单选按钮：

    <input type="radio" ng-model="search.category" value="" /> All 
    <input type="radio" ng-model="search.category" value="SciFi" /> SciFi 
    <input type="radio" ng-model="search.category" value="Horror" /> Horror 
    <input type="radio" ng-model="search.category" value="Fantasy" /> Fantasy

这是运行我的ng-repeat的div：

    <div class="booklistData resultsExist" ng-repeat="book in booklist | orderBy:sort:reverse | filter:search as results">

我尝试在SciFi单选按钮上进行ng-check，如下所示：

    <input type="radio" ng-model="search.category" ng-value="SciFi" ng-checked="(search.category == SciFi)" />

但会禁用所有单选按钮。

作为测试，我什至试图像这样将过滤器添加到ng-repeat div中，但没有成功：

    <div class="booklistData resultsExist" ng-repeat="book in booklist | orderBy:sort:reverse | filter:{category:SciFi}">

任何帮助将非常感激。

在此处添加控制器代码。抱歉，我应该先这样做。

    var app = angular.module('booklistApp', ['ngAnimate']);
    app.controller('getBooklist', function($scope, $http) {
    $http.get("booklist-app.php")
    .then(function (response) {$scope.booklist = response.data;}); 
    $scope.sort = "bknumber*1";
    $scope.reverse = false;
    $scope.changeSort = function(value){
    if ($scope.sort == value){
    $scope.reverse = !$scope.reverse;
    return;
    }
    $scope.sort = value;
    $scope.reverse = false;
    }
    $scope.selectedSort = 1;
    });

纳伦·穆拉利（Naren murali）

您可以使用map数组上的简单函数来执行此操作。

的map代码如下。

$scope.booklist = $scope.booklist.map(function(x){
    if(x.category === ''){
        x.category = "SciFi";
    }
    return x;
  });

我们检查类别是否为空白，如果类别为空白，则分配值，'SciFi'否则将原始值分配回book.category。

注意：我认为最好不要使用它，ng-init或者ng-checked因为在过滤指令时，指令将再次被触发，并且您将丢失之前已设置的值！

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.booklist = [{
    name: "harry potter 1",
    category: '',
    bknumber: 1
  }, {
    name: "harry potter 2",
    category: '',
    bknumber: 2
  }, {
    name: "harry potter 3",
    category: '',
    bknumber: 3
  }, {
    name: "harry potter 4",
    category: '',
    bknumber: 4
  }, {
    name: "harry potter 5",
    category: '',
    bknumber: 5
  }, {
    name: "harry potter 6",
    category: '',
    bknumber: 6
  }];
  $scope.booklist = $scope.booklist.map(function(x) {
    if (x.category === '') {
      x.category = "SciFi";
    }
    return x;
  });
  $scope.sort = "bknumber*1";
  $scope.reverse = false;
  $scope.changeSort = function(value) {
    if ($scope.sort == value) {
      $scope.reverse = !$scope.reverse;
      return;
    }
    $scope.sort = value;
    $scope.reverse = false;
  }
  $scope.selectedSort = 1;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <input type="text" ng-model="search">
  <button ng-click="changeSort('bknumber*1')">toggle Sort</button>
  <div class="booklistData resultsExist" ng-repeat="book in booklist | orderBy:sort:reverse | filter:search as results">
    {{book.name}}
    <input type="radio" ng-model="book.category" value="" /> All
    <input type="radio" ng-model="book.category" value="SciFi" /> SciFi
    <input type="radio" ng-model="book.category" value="Horror" /> Horror
    <input type="radio" ng-model="book.category" value="Fantasy" /> Fantasy
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。