Search code examples
angularjsng-options

ng-Options is not refreshing the wired label when drop-down changed


Following Scott Allen's first code (simple) sample, after drop-down entry changes the wired ng-model is not refreshing this

{{engineer.currentActivity}}

Browser: FF 50.1.0

Angular: 1.5.9

jQuery: 1.7

HTML:

<div ng-controller="EngineeringController">
        {{engineer.name}} is currently : {{engineer.currentActivity}}
        <div>
            choose an activity:
            <select id="agDDLClient" ng-model="EngineeringController.currentActivity" ng-options ="act for act in activities">
            </select>
        </div>
        <input type="button" ng-click="what()" value="check" />
    </div>

JS:

var aIS = angular.module("app", []);
aIS.controller("EngineeringController", function($scope, $http)
{
    $scope.engineer = {
    name: "Dani",
    currentActivity: "Fixing bugs"
};

$scope.activities =
[
    "Writing code",
    "Testing code",
    "Fixing bugs",
    "Dancing"
];

$scope.what = function(){ alert($scope.engineer.currentActivity);}
});

Solution

  • ng-model value should be engineer.currentActivity instead of EngineeringController.currentActivity as you are trying to alert the $scope.engineer.currentActivity inside what() function.

    Working demo :

    var myApp = angular.module('myApp',[]);
    
    myApp.controller('EngineeringController',function($scope) {
        $scope.engineer = {
            name: "Dani",
            currentActivity: "Fixing bugs"
        };
    
        $scope.activities = [
            "Writing code",
            "Testing code",
            "Fixing bugs",
            "Dancing"
        ];
    
        $scope.what = function() { 
            alert($scope.engineer.currentActivity);
        };
        
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="EngineeringController">
            {{engineer.name}} is currently : {{engineer.currentActivity}}
            <div>
                choose an activity:
                <select id="agDDLClient" ng-model="engineer.currentActivity" ng-options ="act for act in activities">
                </select>
            </div>
            <input type="button" ng-click="what()" value="check" />
        </div>