Angular:如何在下拉列表中显示默认选项

时间:2016-03-14 10:00:43

标签: angularjs

我有下面的下拉。我怎样才能展示" C"如选中:

<select ng-model="sortData">
    <option value='abc'>A</option>
    <option value='xyz'>B</option>
    <option value='prq'>C</option>
    <option value='LMN'>D</option>
</select>

5 个答案:

答案 0 :(得分:3)

只需在范围

中设置默认值即可
$sope.sortData = "prq";

或者

<select ng-model="sortData">
    <option value='abc'>A</option>
    <option value='xyz'>B</option>
    <option ng-selected="true" value='prq'>C</option>
    <option value='LMN'>D</option>
</select>

答案 1 :(得分:3)

这是另一种方法:

<select ng-model="sortData" ng-init="sortData='prq'">
  <option value='abc'>A</option>
  <option value='xyz'>B</option>
  <option value='prq'>C</option>
  <option value='LMN'>D</option>
</select>

答案 2 :(得分:0)

在控制器中定义$ scope值

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico"/>
<script src="ddmenu/ddmenu.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $("[id*=a]").live("click", function () {
            $("#dialog26").dialog({
                title: "DMD Officers",
                height: 700,
                width: 1000,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                }
            });
            return false;
        });
    </script>

    <script type="text/javascript">
        $("[id*=b]").live("click", function () {
            $("#dialog27").dialog({
                title: "Outsourced Photographs",
                height: 700,
                width: 1000,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                }
            });
            return false;
        });
    </script>

    <script type="text/javascript">
        $("[id*=c]").live("click", function () {
            $("#dialog28").dialog({
                title: "DMD Dog Squad",
                height: 700,
                width: 1000,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                }
            });
            return false;
        });
    </script>

    <script type="text/javascript">
        $("[id*=d]").live("click", function () {
            $("#dialog29").dialog({
                title: "Snake awareness campaign",
                height: 700,
                width: 1000,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                }
            });
            return false;
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
<tr>
            <td colspan="3" class="auto-style9">
                <nav id="ddmenu">
    <ul>
    <li><a href="Home.aspx" target="_blank">Home</a></li>
    <li><a href="http://www.ril.com/OurBusinesses/Global-Corporate-Security/Security-Services.aspx" target="_blank">About Us</a></li>
</ul>

</nav>
</td>  
</tr>

<tr>
                    <td style="border-style: solid; border-color: #996600;">
                        <asp:imagebutton id="a" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
                        <div id="dialog26" style="display: none;">
                            <embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
                        </div>
                    </td>
                    <td style="border-style: solid; border-color: #996600;">
                        <asp:imagebutton id="b" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
                        <div id="dialog27" style="display: none;">
                            <embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
                        </div>
                    </td>
                    <td style="border-style: solid; border-color: #996600; text-align: center;">
                        <asp:imagebutton id="c" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
                        <div id="dialog28" style="display: none;">
                            <embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
                        </div>
                    </td>
                    <td style="border-style: solid; border-color: #996600; text-align: center;">
                        <asp:imagebutton id="d" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
                        <div id="dialog29" style="display: none;">
                            <embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

答案 3 :(得分:0)

为了将其显示为默认值设置

$scope.sortData = 'prq';

答案 4 :(得分:0)

你可以这样做,它会起作用......

<select ng-model="sortData">
   <option value='abc'>A</option>
   <option value='xyz'>B</option>
   <option value='prq' selected>C</option>
   <option value='LMN'>D</option>
</select>