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>

리소스를api에 직접 전달하지 말고 문자열이나 정형(예를 들어 귀속된ng-model="selected")을 권장합니다

angular에서 생성된 ...의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의 기본 선택과 전송 문제에 더 이상 방해되지 않기를 바랍니다!