Question

我有一个选择选项，必须选择默认选项，即选项[0]如何。？。

我得到了从服务器接收响应的方法。

$http.get("http://192.168.1.10:8080/apartment/community/type/list").then(function(response) {
        $scope.myData = response.data.type;
        $scope.log = {community_type_id : $scope.type[0].value}; //Not working
    });

community_Type数据来自Web服务：

    {
    "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

尝试此操作以将默认值显示为option[0]。

ng-if="false"将默认值显示为option[0]。

删除后，列表会将第一项显示为空。

＆＃13;

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"
  }]
}

＆＃13;

<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>

＆＃13;

Answer 2

ng-if = "false"不会呈现默认选项。

请改为：

＆＃13;

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};

});

＆＃13;

<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>

＆＃13;

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;

    });

你可以迭代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>

希望这可能会有所帮助

Answer 4

选择学位

＆＃13;

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};

});

＆＃13;

<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>

＆＃13;

Answer 5

<强>样本

＆＃13;

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;
});

＆＃13;

<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>

＆＃13;

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

5 个答案: