如何在Angular JS中设置默认值以选择选项

Question

I have a select option and have to select default option ie, option[0] how.?. 我有一个选择选项，必须选择默认选项，即option [0] how。？。

{{ x.community_Type }} {{x.community_Type}}

I have get methos to receive response from server. 我有方法来接收来自服务器的响应。

    {
    "type": [
        {
            "community_type_id": 19,
            "community_Type": "Religious Institution",
            "community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 20,
            "community_Type": "Religious / Common Interest Group",
            community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 21,
            "community_Type": "Residential Society",
            "community_type_details": "To religious leaders"
        }
    ],
    "status": "success",
    "message": " community type list ."
}

community_Type data is comming from web service as : 来自Web服务的community_Type数据来自：

  { "type": [ { "community_type_id": 19, "community_Type": "Religious Institution", "community_type_details": "To religious leaders" }, { "community_type_id": 20, "community_Type": "Religious / Common Interest Group", community_type_details": "To religious leaders" }, { "community_type_id": 21, "community_Type": "Residential Society", "community_type_details": "To religious leaders" } ], "status": "success", "message": " community type list ." }

Answer 1

Try this to show default value as the option[0] . 尝试使用此option[0]将默认值显示为option[0] 。

ng-if="false" shows default value as the option[0] . ng-if="false"默认值显示为option[0] 。

When it is removed the list will show the first item as empty. 删除后，列表将第一项显示为空。

 function optionController($scope) { $scope.myData = [{ "community_type_id": 19, "community_Type": "Religious Institution", "community_type_details": "To religious leaders" }, { "community_type_id": 20, "community_Type": "Religious / Common Interest Group", "community_type_details": "To religious leaders" }, { "community_type_id": 21, "community_Type": "Residential Society", "community_type_details": "To religious leaders" }] }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div ng-controller="optionController"> <select ng-model="log.community_type_id" ng-options="x.community_type_id as x.community_Type for x in myData"> <option value="" ng-if="false">{{ x.community_Type }}</option> </select> </div> </div>

Answer 2

ng-if = "false" does not render a default option. ng-if = "false"不呈现默认选项。

Do this instead : 改为这样做：

 var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { $scope.myData = [ { "community_type_id": 19, "community_Type": "Religious Institution", "community_type_details": "To religious leaders" }, { "community_type_id": 20, "community_Type": "Religious / Common Interest Group", "community_type_details": "To religious leaders" }, { "community_type_id": 21, "community_Type": "Residential Society", "community_type_details": "To religious leaders" } ]; $scope.log = {community_type_id : $scope.myData[0].community_type_id}; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="MyApp" ng-controller="MyCtrl"> <select ng-model="log.community_type_id" ng-options="x.community_type_id as x.community_Type for x in myData"> <option value="">--Select--</option> </select> </body>

Answer 3

$http.get("http://192.168.1.10:8080/apartment/community/type/list").then(function(response) {
        $scope.myData = response.type;
        $scope.selectedValue=$scope.myData[0].community_Type;

    });

you can iterate myData 您可以迭代myData

<select ng-model="data.community_Type" ng-repeat="data in myData">
<option value="data.community_Type" ng-selected="{data.community_Type == selectedValue }">{{ data.community_Type }}</option>
</select>

Hope this may help 希望这会有所帮助

Answer 4

Select Degree 选择学位

 var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { $scope.myData = [ { "community_type_id": 19, "community_Type": "Religious Institution", "community_type_details": "To religious leaders" }, { "community_type_id": 20, "community_Type": "Religious / Common Interest Group", "community_type_details": "To religious leaders" }, { "community_type_id": 21, "community_Type": "Residential Society", "community_type_details": "To religious leaders" } ]; $scope.log = {community_type_id : $scope.myData[0].community_type_id}; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="MyApp" ng-controller="MyCtrl"> <select ng-model="log.community_type_id" ng-options="x.community_type_id as x.community_Type for x in myData"> </select> </body>

Answer 5

DEMO 演示

 var myapp = angular.module('myapp', []); myapp.controller('FirstCtrl', function ($scope) { $scope.myData = [ { "community_type_id": 19, "community_Type": "Religious Institution", "community_type_details": "To religious leaders" }, { "community_type_id": 20, "community_Type": "Religious / Common Interest Group", "community_type_details": "To religious leaders" }, { "community_type_id": 21, "community_Type": "Residential Society", "community_type_details": "To religious leaders" } ]; $scope.selectedCommunity = $scope.myData[0].community_Type; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="FirstCtrl" ng-app="myapp"> <select ng-options="item.community_Type as item.community_Type for item in myData" ng-model="selectedCommunity"></select> </div>

如何在Angular JS中设置默认值以选择选项

问题描述

5 个解决方案

解决方案1
2 2017-05-05 10:05:59

解决方案2
0 2017-05-05 10:06:13

解决方案3
0 2017-05-05 10:12:04

解决方案4
0 2017-05-05 10:24:38

解决方案5
0 2017-05-06 08:53:45

如何在Angular JS中设置默认值以选择选项

问题描述

5 个解决方案

解决方案1 2 2017-05-05 10:05:59

解决方案2 0 2017-05-05 10:06:13

解决方案3 0 2017-05-05 10:12:04

解决方案4 0 2017-05-05 10:24:38

解决方案5 0 2017-05-06 08:53:45

解决方案1
2 2017-05-05 10:05:59

解决方案2
0 2017-05-05 10:06:13

解决方案3
0 2017-05-05 10:12:04

解决方案4
0 2017-05-05 10:24:38

解决方案5
0 2017-05-06 08:53:45