下拉列表框默認(rèn)選中username，打開(kāi)瀏覽器，直接輸入搜索，但是搜索的內(nèi)容是空的，怎么解決呢？

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    .box {
        width: 700px;
        text-align: center;
        margin: 100px auto;
    }
</style>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./libs/angular.min.js"></script>
<script>
    // 實(shí)例化一個(gè)應(yīng)用,沒(méi)有依賴(lài)相關(guān)
    var app = angular.module("app", []);
    app.controller("appController", ["$scope", "$filter", function($scope, $filter) {
        // 模擬數(shù)據(jù)
        $scope.list = [{
            username: "朱雀",
            sex: "男",
            weixin: "11",
            momo: "99991111",
            tantan: "88811122",
            baihe: "老布頭",
            youyuan: "老頭"
        }, {
            username: "劉小強(qiáng)",
            sex: "男",
            weixin: "33",
            momo: "99991111",
            tantan: "88811122",
            baihe: "西門(mén)慶",
            youyuan: "西門(mén)慶"
        }, {
            username: "玄武",
            sex: "男",
            weixin: "66",
            momo: "99991111",
            tantan: "88811122",
            baihe: "沒(méi)毛病",
            youyuan: "沒(méi)毛病"
        }, {
            username: "鳳凰",
            sex: "男",
            weixin: "88",
            momo: "99991111",
            tantan: "88811122",
            baihe: "小旋風(fēng)",
            youyuan: "小旋風(fēng)"
        }];

        $scope.persons = $scope.list;
        // 注冊(cè)一個(gè)搜索事件
        $scope.search = function() {
            $scope.persons = $scope.list;
            // 思路:我們要進(jìn)行搜索，可以通過(guò)過(guò)濾器進(jìn)行搜索。
            // 搜索到結(jié)果后將搜索的結(jié)果賦值給 $scope.persons,讓其自動(dòng)更新視圖
            // 通過(guò)過(guò)濾器進(jìn)行搜索查詢(xún)，如何使用過(guò)濾器呢，
            // 把過(guò)濾器的整個(gè)對(duì)象給傳遞過(guò)來(lái)，                           整個(gè)對(duì)象是angular提供的$filter
            // 通過(guò)js的操作，可以實(shí)現(xiàn)調(diào)用過(guò)濾器的方法
            // 值的注意的是:$filter包含九大過(guò)濾器  data  currency date orderBy limitTo....
            // console.log($filter("filter"))
            var func = $filter("filter");
            //func是用來(lái)過(guò)濾數(shù)據(jù)的 ，第一個(gè)參數(shù)是要過(guò)濾的數(shù)據(jù)  第二個(gè)參數(shù)是要過(guò)濾的條件{name="張三"}
            var obj = {};
            obj[$scope.fileName] = $scope.fileValue;
            var result = func($scope.persons, obj);
            console.log(obj);
            $scope.persons = result;
        };
        // 綁定排序方法：
        var isorderBy = false;
        $scope.orderBy = function(fileNames) {
            isorderBy = !isorderBy;
            $scope.persons = $filter("orderBy")($scope.persons, fileNames, isorderBy);
        }

    }])
</script>

</head>

<div class="box">
    <select class="form-control" style="width:300px; float:left;" ng-model="fileName">
        <!-- <option value="">--------------------請(qǐng)選擇----------------------</option> -->
        <option value="username" ng-selected="true" ng-selected="true" value="">姓名</option>
        <option value="sex">年齡</option>
        <option value="weixin">微信</option>
        <option value="momo">陌陌</option>
        <option value="tantan" >探探</option>
        <option value="baihe">百合網(wǎng)</option>
        <option value="youyuan">有緣網(wǎng)</option>
    </select>
    <input type="text" name="" class="form-control" style="width:300px; float:left;" value="" ng-model="fileValue" ng-keyup="search()">
    <table class="table table-bordered">
        <tr>
            <td ng-click="orderBy('username')">姓名</td>
            <td ng-click="orderBy('sex')">年齡</td>
            <td ng-click="orderBy('weixin')">微信</td>
            <td ng-click="orderBy('momo')">陌陌</td>
            <td ng-click="orderBy('tantan')">探探</td>
            <td ng-click="orderBy('baihe')">百合網(wǎng)</td>
            <td ng-click="orderBy('youyuan')">有緣網(wǎng)</td>
        </tr>
        <tr ng-repeat="item in persons">
            <td>{{item.username}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.weixin}}</td>
            <td>{{item.momo}}</td>
            <td>{{item.tantan}}</td>
            <td>{{item.baihe}}</td>
            <td>{{item.youyuan}}</td>
        </tr>
    </table>
</div>

</body>

</html>

回答

編輯回答

舊螢火

你controller中的 fileName 需要指定一個(gè)初始值，ng-selected 只是作用于視圖的選中狀態(tài)指令。

引用官方文檔的說(shuō)明給你做參考

關(guān)于這個(gè)指令的說(shuō)明

A special directive is necessary because we cannot use interpolation inside the selected attribute.

關(guān)于這個(gè)指令和ngModel的說(shuō)明

ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.

解決方法