AngularJS之ng-options的best practise

废话不多说，直接上代码。

function MySelectCtrl($scope)
{
  $scope.Model = [
    {
      id: 10002,
      MainCategory: '男',
      ProductName: '水洗T恤',
      ProductColor: '黑'
    },
    {
      id: 10004,
      MainCategory: '女',
      ProductName: 'V领短袖',
      ProductColor: '红'
    },
    {
      id: 10006,
      MainCategory: '男',
      ProductName: '圆领长袖',
      ProductColor: '白'
    }];
  
  $scope.selected = 10002;
}

　　

<select ng-model="selected" ng-options="m.id as (m.ProductColor + ' - ' + m.ProductName) for m in Model">
  <option value="">-- 选择一个试试 --</option>
</select>

• 建议不要直接传resource给api，尽量是字符串或整型（比如绑定的是ng-model="selected"）
• 不要管angular生成出来的<option>...</option>中的value是啥，想传什么值给后端就在ng-options=""中的第一个参数写，如本例是m.id
• ngOptions 自动选中是根据reference来的，所以ng-model中绑定的值应当是与options数组同源如下：

$scope.getBeacon = function (id) {
  return Beacon.get({id: id}).$promise;
};

$scope.getVendors = function () {
  return Vendor.query({}).$promise;
};

$q.all([$scope.getVendors(), $scope.getBeacon($scope.beacon.id)])
  .then(function (promises) {
    $scope.vendors = promises[0];
    $scope.beacon = promises[1];
    $scope.beacon.vendor = $scope.vendors[_.findIndex($scope.vendors, $scope.beacon.vendor)];
});


// HTML
<div class="form-group">
  <label for="vendor">厂家</label>
  <select class="form-control" id="vendor" ng-model="beacon.vendor" ng-options="vendor as vendor.name for vendor in vendors">
    <option value="" ng-if="!beacon.vendor">-- 请选择厂家 --</option>
  </select>
</div>

 

写下这些希望再不要再被angular的默认选中和传值问题干扰了！