angular js：在select

时间：2015-06-06 11:12:13

标签： javascript angularjs

我有一个Web服务，其结果如下：

{
    "selectedStateId": "1",
    "selectedCityId": "1",
    "selectedAreaId": "1",
    "states": [{
        "stateId": "1",
        "stateName": "Gujarat"
    }, {
        "stateId": "2",
        "stateName": "Rajasthan"
    }],
    "cities": [{
        "cityId": "1",
        "stateId": "1",
        "cityName": "Ahmedabad"
    }, {
        "cityId": "2",
        "stateId": "1",
        "cityName": "Surat"
    }],
    "areas": [{
        "areaId": "1",
        "cityId": "1",
        "areaName": "thaltej"
    }, {
        "areaId": "2",
        "cityId": "1",
        "areaName": "Maninagar"
    }, {
        "areaId": "3",
        "cityId": "1",
        "areaName": "Naranpura"
    }]
}

现在，我想将状态，城市和区域的数组绑定到三个不同的select，并使用作为父对象成员的stateId，cityId和areaId设置其值。

两个问题：

  1. 如何设置三个不同select s的值？
  2. 如果我们有对象数组，我上面创建的对象是什么？

    3. 感谢。

    编辑：我猜前两个答案有一些误解。所以，改变了我的数据表示。我想将selectedStateId设置为select个州的元素，selectedCityId设置为城市的select元素，依此类推。现在，我想你应该清楚我要求的东西..

4 个答案:

答案 0 :(得分：1)

在这里，我为您创建了一个plunker。请看html有3个选择

<select>....</select>

＆＃34; http://plnkr.co/edit/LaypSCATZyQxLHYHjgnB?p=preview＆＃34;

答案 1 :(得分：0)

好的，如果您想为区域，城市和州创建三个从上面选择的数组，那么请执行以下操作：

您的上述回答是这样的：

$scope.items =  response;
//set default . I am setting first state as default
$scope.selectedstate  = response.states[0];

让我们说状态是

<select 
  ng-options="state.stateName as state.label for state in items.states track by state.stateId"
 ng-model="selectedstate">

对区域和城市采用相同的流程。

供您参考https://docs.angularjs.org/api/ng/directive/ngOptions。这样做的角度方式。

答案 2 :(得分：0)

另一种使用ng-options代替ng-repeat

的方法 

angular.module('app',[]).controller('ctrl',function($scope){
 
  $scope.data = {
    "selectedStateId": "1",
    "selectedCityId": "1",
    "selectedAreaId": "1",
    "states": [{
        "stateId": "1",
        "stateName": "Gujarat"
    }, {
        "stateId": "2",
        "stateName": "Rajasthan"
    }],
    "cities": [{
        "cityId": "1",
        "stateId": "1",
        "cityName": "Ahmedabad"
    }, {
        "cityId": "2",
        "stateId": "1",
        "cityName": "Surat"
    }],
    "areas": [{
        "areaId": "1",
        "cityId": "1",
        "areaName": "thaltej"
    }, {
        "areaId": "2",
        "cityId": "1",
        "areaName": "Maninagar"
    }, {
        "areaId": "3",
        "cityId": "1",
        "areaName": "Naranpura"
    }]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-model="data.selectedStateId" ng-options="s.stateId as s.stateName for s in data.states" ></select>  
  <select ng-model="data.selectedCityId" ng-options="c.cityId as c.cityName for c in data.cities" ></select>  
  <select ng-model="data.selectedAreaId" ng-options="a.areaId as a.areaName for a in data.areas" ></select>  
</div>

答案 3 :(得分：0)

好的，我想回答我自己的问题。对于那些期待详细解释的人：

回答问题1：

要设置select元素的选定值，我们只需将ng-selected属性设置为option，如下所示：

假设我的回答是：

$scope.x = {
    "selectedStateId": "1",
    "selectedCityId": "1",
    "selectedAreaId": "1",
    "states": [{
        "stateId": "1",
        "stateName": "Gujarat"
    }, {
        "stateId": "2",
        "stateName": "Rajasthan"
    }],
    "cities": [{
        "cityId": "1",
        "stateId": "1",
        "cityName": "Ahmedabad"
    }, {
        "cityId": "2",
        "stateId": "1",
        "cityName": "Surat"
    }],
    "areas": [{
        "areaId": "1",
        "cityId": "1",
        "areaName": "thaltej"
    }, {
        "areaId": "2",
        "cityId": "1",
        "areaName": "Maninagar"
    }, {
        "areaId": "3",
        "cityId": "1",
        "areaName": "Naranpura"
    }]
};

然后，在html中，我们可以这样写：

<select>
<option ng-selected="{{state.stateId == x.selectedStateId}}" ng-repeat="state in x.states" value="{{state.stateId}}">{{state.stateName}}</option>
</select>
<select>
<option ng-selected="{{city.cityId == x.selectedCityId}}" ng-repeat="city in x.cities" value="{{city.cityId}}">{{city.cityName}}</option>
</select>
<select>
<option ng-selected="{{area.areaId == x.selectedAreaId}}" ng-repeat="area in x.areas" value="{{area.areaId}}">{{area.areaName}}</option>
</select>

回答问题2：

假设我们有这个对象的数组，比如说，

$scope.list = [{
    "stateId": "1",
    "cityId": "1",
    "areaId": "1",
    "states": [{
      "stateId": "1",
      "stateName": "Gujarat"
    }, {
      "stateId": "2",
      "stateName": "Rajasthan"
    }],
    "cities": [{
      "cityId": "1",
      "stateId": "1",
      "cityName": "Ahmedabad"
    }, {
      "cityId": "2",
      "stateId": "1",
      "cityName": "Surat"
    }],
    "areas": [{
      "areaId": "1",
      "cityId": "1",
      "areaName": "thaltej"
    }, {
      "areaId": "2",
      "cityId": "1",
      "areaName": "Maninagar"
    }, {
      "areaId": "3",
      "cityId": "1",
      "areaName": "Naranpura"
    }]
  },
  {
    "stateId": "2",
    "cityId": "2",
    "areaId": "2",
    "states": [{
      "stateId": "1",
      "stateName": "Gujarat"
    }, {
      "stateId": "2",
      "stateName": "Rajasthan"
    }],
    "cities": [{
      "cityId": "1",
      "stateId": "1",
      "cityName": "Ahmedabad"
    }, {
      "cityId": "2",
      "stateId": "1",
      "cityName": "Surat"
    }],
    "areas": [{
      "areaId": "1",
      "cityId": "1",
      "areaName": "thaltej"
    }, {
      "areaId": "2",
      "cityId": "1",
      "areaName": "Maninagar"
    }, {
      "areaId": "3",
      "cityId": "1",
      "areaName": "Naranpura"
    }]
  },
  {
    "stateId": "1",
    "cityId": "2",
    "areaId": "3",
    "states": [{
      "stateId": "1",
      "stateName": "Gujarat"
    }, {
      "stateId": "2",
      "stateName": "Rajasthan"
    }],
    "cities": [{
      "cityId": "1",
      "stateId": "1",
      "cityName": "Ahmedabad"
    }, {
      "cityId": "2",
      "stateId": "1",
      "cityName": "Surat"
    }],
    "areas": [{
      "areaId": "1",
      "cityId": "1",
      "areaName": "thaltej"
    }, {
      "areaId": "2",
      "cityId": "1",
      "areaName": "Maninagar"
    }, {
      "areaId": "3",
      "cityId": "1",
      "areaName": "Naranpura"
    }]
  }];

在这种情况下，我们需要一个包装器来包装所有选择，以便我们可以遍历它。

所以，我采用了一个简单的<div>..</div>来完成我的案例，如下所示：

<div ng-repeat="x in list">
    <select>
    <option ng-selected="{{state.stateId == x.stateId}}" ng-repeat="state in x.states" value="{{state.stateId}}">{{state.stateName}}</option></select>
    <select>
    <option ng-selected="{{city.cityId == x.cityId}}" ng-repeat="city in x.cities" value="{{city.cityId}}">{{city.cityName}}</option></select>
    <select>
    <option ng-selected="{{area.areaId == x.areaId}}" ng-repeat="area in x.areas" value="{{area.areaId}}">{{area.areaName}}</option></select>
</div>
相关问题
最新问题