kneerunjun/aselectoptions.md

## aselectoptions.md

      
    Raw
  

              aselectoptions.md
            
          
    Getting the choices for selection

I may not have too many answers for the question - "whats the best way of gettin your selection option choices ?"
Programming selection options with Angular may not be a taks at all , but a couple of things that may be a bit tricky..

Timing of getting the choices downloaded from the service
Caching the choices once downloaded for multiple selection options avilable

Timing of getting the choices

I assume you want to download the choices from server maybe or a store across the http request. This is what creates the timeline catch.
while your request is getting the choices, which are not many (if they are , you would not be using the selection option atall) you have nothing the populate the drop down. And when the choices are you woudl then want to connect and make it available for the users to pick from them.
Caching the choices

Multiple selection controls are possible, but the choices are at the root. Ideally you would want to download the choices once before  all the selection options are loaded. Which gets us to caching the choices and downloading them only once

  
## bselectionoptions.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body ng-app="myapp">
    <table>
      <thead>
        .............
      </thead>
    </table>
    <tbody>
      <tr ng-repeat="e in employees">
        <td>
          <!--this is the first instance of the custom directive and loads it choices for all the rows that are there-->
          <!-- you do not want the directive to download the choices for each of the instances in the rows.. -->
          <my-select delg-getchoices="getRoleChoices" sel-option="selRole"></my-select>
        </td>
        <td>
          <my-select delg-getchoices="getAccessChoices" sel-option="selAccess"></my-select>
        </td>
      </tr>
    </tbody>
</body>
</html>

## cwithoutservice.js
var myapp = ........
myapp.directive("mySelect", function(){
  return {
    restrict:"E",
    scope:{
      delgGetchoices:"&"
    },
    controller :function($scope){
      var init = function(){
        //if i just go ahead to download the choices here in the controller of the directive it would do that all the time
        $scope.delgGetchoices().then(function(){
          //we are asssuming since the choices come across the http it woudl be a promise that is returned on the remote function call
        }, function(data){

        })
      }

    }
  }

})

## withaservice.js
var myapp = ........
myapp.directive("mySelect", function(){
  return {
    restrict:"E",
    scope:{
      delgGetchoices:"&"
    },
    controller :function($scope){
      var init = function(){
        //if i just go ahead to download the choices here in the controller of the directive it would do that all the time
        $scope.delgGetchoices().then(function(){
          //we are asssuming since the choices come across the http it woudl be a promise that is returned on the remote function call
        }, function(data){

        })
      }

    }
  }

})
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

	</head>
	<body ng-app="myapp">
	<table>
	<thead>
	.............
	</thead>
	</table>
	<tbody>
	<tr ng-repeat="e in employees">
	<td>
	<!--this is the first instance of the custom directive and loads it choices for all the rows that are there-->
	<!-- you do not want the directive to download the choices for each of the instances in the rows.. -->
	<my-select delg-getchoices="getRoleChoices" sel-option="selRole"></my-select>
	</td>
	<td>
	<my-select delg-getchoices="getAccessChoices" sel-option="selAccess"></my-select>
	</td>
	</tr>
	</tbody>
	</body>
	</html>
	var myapp = ........
	myapp.directive("mySelect", function(){
	return {
	restrict:"E",
	scope:{
	delgGetchoices:"&"
	},
	controller :function($scope){
	var init = function(){
	//if i just go ahead to download the choices here in the controller of the directive it would do that all the time
	$scope.delgGetchoices().then(function(){
	//we are asssuming since the choices come across the http it woudl be a promise that is returned on the remote function call
	}, function(data){

	})
	}

	}
	}

	})