Question

我想在datalist中获取所选选项的ID，使用select很容易，但我不知道如何获取选项名称的ID。

制作了一个代码段

var app = angular.module('app', []);
app.controller('getLocalityId', function($scope) {
    $scope.localityList = [{
        name: "Rome",
        id: 1
    }, {
        name: "London",
        id: 2
    }, {
        name: "Paris",
        id: 3
    }];
    $scope.fetchId = function(id) {
        console.log(id);
    };
});

HTML就像这样

<!DOCTYPE html>
<html ng-app='app'>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
    <div class="col-lg-6" ng-controller="getLocalityId">
        <label for="locality">Locality</label>
        <input class="input form-control" placeholder="Search By Name" list="locality" ng-model="obj.id" ng-change="fetchId(obj.id)" />
        <datalist id="locality" name="locality">
            <select>
                <option ng-repeat=" obj in localityList" value="{{ obj.name }}" selected-value="{{ obj.id  }}">{{ obj.id }}</option>
            </select>
        </datalist>

    </div>

</body>

</html>

Answer 1

在您的案例中使用ng-options：

 <select ng-model="currentID" ng-options="obj.id as obj.name for obj in localityList"></select>

<强> Demo

更改datalist中的ng-model

1 个答案: