我想設置一個單選按鈕，在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>