Question

我最近开始使用角度编码，我正在构建具有前端HTML5和Angular的应用程序，我遇到了一个问题：我正在尝试实现该项{{city.name}}自动从drop中选择基于它的下方菜单value="{{city.id}}查看加载

<div class="container1">
    <label class="lbl"><b>Select city</b></label>
    <select id="City" name="City" class="form-control" size="2" ng-model="selectedValue1">
        <option ng-repeat="city in chooseCities" value="{{city.id}} ">
            {{city.name}}
        </option>
    </select>
</div>

如果{{city.id}}值与第二个ng-repeat元素ng-model="con.id"

中的项匹配

<div ng-repeat="con in contact">
    <div ng-if="$index == 2">
        <div hidden>
            <input type="text" placeholder="City id" ng-model="con.id" required>
        </div>
        <div>
            <label class="lbl"><b>Zip code</b></label>
        </div>
        <div>
            <input type="text" placeholder="Street number" ng-model="con.zip_code" required>
        </div>
    </div>
</div>

代表城市ID ，但是从不同的（嵌套的） JSON数组中拉出来：

2: {name: "Zagreb", zip_code: "10000", country_id: 1, id: 22}
3: {name: "Croatia", alpha_2: "HR", alpha_3: "HRV", id: 1}
4: {name: "MALE", id: 1}

通过HTTP post请求和Angular控制器看起来像这样。

$scope.editContact = function() {
        $scope.id = localStorage.getItem("id");
        localStorage.clear();
        $http({
            method: 'POST',
            url: 'http://localhost:8080/CrozApp/JSPContact',
            //url: 'http://10.0.2.2:8080/DocBackend/JSP',
            data: { action: $scope.action2, id: $scope.id },
            headers: { 'Content-Type': 'application/json' }
        }).success(function(data, status, headers, config) {
            //console.log(data);

            if (data != null) {

                $scope.contact = data;

                console.log($scope.data);
            } else if (data == null) {
                alert("database empty or not accessible");
            }

        });

基本上该视图会显示用户数据（名称，地址，城市名称，国家/地区等。），如果城镇与已绑定的城镇相匹配，我想从城镇列表中选择城镇给用户。 HTTP调用方法在视图中由ng-init初始化。我在堆栈溢出时遇到了许多类似的问题，我假设某些过滤器或匹配必须通过控制器或视图应用，但我无法弄清楚如何。看到工作的例子真是太棒了。谢谢大家。

Plunker version:

Answer 1

如果您希望预选所选城市，而不是选择要更新的联系人的城市ID，则只需在启动所有数据时手动设置选择的ng-model一次。< / p>

示例：

function setSelectedCity() {

  var city = $scope.chooseCities.filter(function(city) {
    return city.id === $scope.contact[1].city_id;
  })[0];

  if (city) {
    $scope.selectedValue1 = city.id.toString();
  }
}

setSelectedCity();

请注意，在这种情况下，从select中选择一个选项后，select的ng-model值将始终为一个字符串。

演示： https://plnkr.co/edit/rpvFZm1fx0e3u5nfUh6m?p=preview

如果您希望更新联系人的城市ID，则数组中第二个对象的城市ID和整个第三个对象都应该更新，因为它们是逻辑链接的。这将需要更多的工作，可能需要对数据结构进行一些更改。

如何根据查看加载中另一个ng重复的值预先选择一个ng-repeat选项？

1 个答案: