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

Question

我是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单选按钮上尝试了这样的检查：

    <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}">

非常感谢任何帮助。

在此处添加Controller代码。对不起我应该先做。

    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;
    });

Answer 1

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

map代码如下。

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

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

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

＆＃13;

＆＃13;

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;
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;