javascript - 在 Angularjs 中根据第一个值显示第二个值

Question

我有一个关于 ng-repeat 的列表，其中包含名称。我想获取这个名字并传递给 url 作为参数来获取他的主题。到目前为止我所做的是可以传递名称并从另一个 API 获取主题。但问题是姓氏用他的值替换了所有下拉列表:

<ul ng-repeat="person in persons">
    <li ng-init="pass(person.name)">{{person.name}}</li>
    <li>
        <select>
            <option ng-repeat="(key, value) in choices">{{value}}</option>
        </select>
    </li>
</ul>

Controller .js

$scope.person = {
    [
        {
            "id": 1,
            "name": "Mark"
        },
        {
            "id": 2,
            "name": "Jakob"
        }
    ]
}

$scope.pass = function(name) {
    $scope.name = name;
    $http.get('url?name=' + $scope.name, {})
        .then(function(response) {
            $scope.choices = response.data;
        },
        function(errResponse) {
            console.error('Error while fetching choices');
        });

}

注意:有一个 get 方法可以传递 URL 末尾的 person.name。

如何隔离从 HTML 到 Controller 的传递。谢谢

Answer 1

使您的 Controller 代码如下:

$scope.persons = [{
        "id": 1,
        "name": "Mark"
    },
    {
        "id": 2,
        "name": "Jakob"
    }
];


$scope.pass = function(person) {
    $scope.name = person.name;
    $http.get('url?name=' + $scope.name, {}).then(function(response) {
            person.choices = response.data;
        },
        function(errResponse) {
            console.error('Error while fetching choices');
        });

}

你的 html 如下:

<ul ng-repeat="person in persons">
    <li ng-init="pass(person)">{{person.name}}</li>
    <li><select>
    <option ng-repeat="(key, value) in person.choices">{{value}}</option>
    </select></li>
</ul>

这是一个示例 fiddle :https://jsfiddle.net/Lt7aP/4019/