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的默认选中和传值问题干扰了！