我想设置一个单选按钮，在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-重复股利：

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

我试着像这样的科幻单选按钮NG-检查：

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

但它禁用所有单选按钮。

作为一个测试，我甚至尝试添加过滤器的NG-重复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; 
    }); 

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因为过滤指令将得到再次触发使用，你将失去那些已经设置了先前的值！

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>