how to enable (initially ng-disabled is set as 'true') select list when retrieving data from server is complete in async call?

Question

I have several select list in my form HTML where we are gathering user inputs.

Here is what I want to do 1) Initially disable 'select' list by using ng-disabled='true' as there is no data ready in controller because I am getting data from Server in async way. 2) When the async call is successfully made, I want to enable the 'select' control so that it can populate the data (from server) to users.

Problem is it doesn't work :( Please take a look at the codes below and help me resolving this.

            $scope.isNeedDisable = true;

            // Retrieving Market List
            $scope.retrieveMarketList = function () {

                var sql =   "SELECT marketlist from market_table";

                var dataLoader = xxx.data.loader
                    .Builder
                    .fromSql(sql)
                    .build();
                var dataSet = new xxx.data.DataSet()
                    .dataLoader(dataLoader);

                dataSet.fetch(new xxx.data.Projection()).then(function(d) {
                    $scope.jsonMarketList = d[0].data;
                    $scope.isNeedDisable = false; 

                }, onDataError);
            };

<form class="form-horizontal" role="form" action="index_org.html" method="GET" id="mSpeedOneForm">
                <div class="form-group">
                    <label for="AccountMarket" class="col-lg-2 control-label">Market</label>

                   <div class="col-lg-10">
                        <select id="accountMarketList"
                                name="accountMarket"
                                class="selectpicker show-tick form-control"
                                data-live-search="true"
                                ng-model="selectedMarket"
                                ng-options="market.country for market in jsonMarketList"
                                ng-required="true"
                                ng-disabled="isNeedDisable">
                            <option value="">Select market you want</option>
                        </select>
                    </div>
                </div>
<form>

I debugged the code with WebStorm and found out all the data is successfully retrieved and 'isReady' value is changed correctly to 'true'.

But the select list is still disabled. What is wrong with my code?

Thanks in advance.

try changing `isReady` to `true`/`false` without putting quotes around them. and then switching your true/false ordering.. at the moment you're using a string which means `'false' == true` — haxxxton, Aug 03 '16 at 03:09
Thanks for answering. I changed it to true/false without quotes, but it doesn't work :( — Min, Aug 03 '16 at 03:25

score 0 · Answer 1 · answered Aug 03 '16 at 03:37

0

Why don't you count jsonMarketList's elements. If this array is empty, then disable your select and if there are any values, then enable it again

<html ng-app="myApp">

<head>

</html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="myCtrl">
    <select id="accountMarketList" name="accountMarket" 
   class="selectpicker show-tick form-control" 
   data-live-search="true" ng-model="selectedMarket" 
   ng-options="market.country for market in jsonMarketList" 
   ng-required="true" 
   ng-disabled="jsonMarketList.length === 0">
        <option value="">Select market you want</option>
    </select>
    <br>
    <br>
    <button ng-click="getMarketValues()">Populate Values</button>
    <br>
    <br>
    <button ng-click="removeMarketValues()">Remove Values</button>
    <script>
        var appModule = angular.module("myApp", []);
        appModule.controller("myCtrl", ['$scope', function($scope) {
            $scope.jsonMarketList = []; 

            $scope.getMarketValues = function() {
                $scope.jsonMarketList = [
                  {name:"market1", country:"USA"},
                  {name:"market2", country:"UK"},
                  {name:"market3", country:"CA"}
                  ];
            }

            $scope.removeMarketValues = function() {
                $scope.jsonMarketList = [];
            }

        }]);
    </script>
</body>

</html>

answered Aug 03 '16 at 03:37

Raman Sahasi

30,180
9
58
71

Great thanks. I tried with your suggested codes and found out it works when the button is clicked. But unfortunately when I added the codes to my html (counting jsonMarketList) (and of course I didn't add button click part of codes as I want the select to be enabled when the data is retrieved from server), it does not work. Seems like there should be something other method refresh DOM forcely when the data is retrieved (which means the number of array in jsonMarketList is greater than 0). Please help me if you know the answer. Thanks in advance. – Min Aug 03 '16 at 04:10
@Min The good thing about `angularjs` is that it works on the concept of [data binding](http://stackoverflow.com/questions/9682092/how-does-data-binding-work-in-angularjs). Hence you don't have to refresh your DOM after `$scope.jsonMarketList` value was changed. Whenever your `$scope.jsonMarketList` is changed, angularjs will automatically update all the DOM that rely on this object. However, if it's not happening, then there's some problem with data retrieval. Please check that data is received properly and then it is assigned to `$scope.jsonMarketList` properly. Use `console.log` to check it – Raman Sahasi Aug 03 '16 at 04:22
Yes. That is good thing from AngularJS (data binding). I added the code (console.log('number of jsonMarketList is ' + $scope.jsonMarketList.length);) and checked the console output which is as below (number of jsonMarketList is 53). It looks data is retrieved successfully. That is why I am posting this question. :( – Min Aug 03 '16 at 05:16
I've posted complete working code which should be a proof that it works. If it isn't working then my best guess would be that there's some logic error in your code. I can only help if I get a look at your complete code. Can you please create a `plunker` or `fiddle` or upload your files on a `repository`? – Raman Sahasi Aug 03 '16 at 05:40
I found the solution which is actually your suggestion. I don't know why checking data lenth didn't work at the time. But today I tried again and found it works – Min Aug 18 '16 at 08:32
@Min I'm glad you found the solution. Since you're new here, please don't forget to mark the answer accepted which helped most in solving the problem. See also [How does accepting an answer work?](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) – Raman Sahasi Aug 18 '16 at 09:57

score 0 · Answer 2 · answered Aug 03 '16 at 04:42

It does work by switching ng-disabled value. I suspect is it due to variable scope issue, you can try using the dot notation and see whether it solves your issue.

angular.module('test', []).controller('Test', Test);

function Test($scope, $timeout) {
  $scope.test = {
      options: [],
      isDisabled: true
  }
  
  $timeout(function(){
    $scope.test.options = [
      {name: "apple"},
      {name: "orange"},
      {name: "starfruit"}
    ]
    
    $scope.test.isDisabled = false;
  }, 3000);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>

<div ng-app="test" ng-controller="Test">
  <select ng-options="option.name for option in test.options" ng-model="test.selected" ng-disabled="test.isDisabled"> 
    <option value="">Hi!</option>
  </select>
  <br>disabled: {{test.isDisabled}}
  <br>selected: {{test.selected}}
</div>

how to enable (initially ng-disabled is set as 'true') select list when retrieving data from server is complete in async call?

2 Answers2