AngularJS Proper way to pass variables

Question

I would like to make them global so I can use [color] and [shape] throughout the whole script. I will need each one to update independently but as I continue to add to the site I am going to need to use both together. Live preview

Example does not work: $scope.shapeSelected = response.data[color][shape];
Example does work: $scope.shapeSelected = response.data.blue[shape];

var app = angular.module("computer", ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/main', {
        controller: 'MainCtrl'
    }).
    otherwise({
        redirectTo: '/main'
    })
}])

.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {

    $scope.colorType = function(color) {
        $http.get('stuff.json').then(function(response) {
            $scope.colorSelected = response.data.type[color];

        });
    }

    $scope.shapeType = function(shape) {
        $http.get('shapes.json').then(function(response) {
            $scope.shapeSelected = response.data[color][shape]; // <--- [color] is not getting pulled in on this function.

            var resultsColorShape = $scope.shapeSelected; // <--- I would like to be able to store this incase i need it later. 
            console.log('resultsColorShape');
        });
    }

}]);

Orkhan Alikhanov · Accepted Answer · 2016-08-28 21:52:52Z

1

You don't have to pass argument to your functions. if you defined ng-model="Color" you can use $scope.Color in your javascript code:

change in html:

ng-change="colorType()"

ng-change="shapeType()"

and js to:

 $scope.colorType = function() {
 $http.get('stuff.json').then(function(response) {
     $scope.colorSelected = response.data.type[$scope.Color];

 });
}

 $scope.shapeType = function() {
     $http.get('shapes.json').then(function(response) {
         $scope.shapeSelected = response.data[$scope.Color][$scope.Shape]; 
     });
 }

answered Aug 28, 2016 at 21:52

Orkhan Alikhanov

10.2k4 gold badges50 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Bush Over a year ago

Can you add this to the plnkr demo because I just tried using $scope.Color and $scope.Shape and neither works.

Nikhilesh Shivarathri · Accepted Answer · 2016-08-28 22:00:46Z

0

If your question is about passing the variables or sharing the data properly across functions then this should help you.

In your scenario. As the ng-change functions are assigned.

When the ng-change function is triggered if you don't have a ng-model try to save the new value that is the passed parameter in the $scope so as to access it across all the other functions in that controller.
If you have a ng-model declared for your element then just use the attribute for the ng-model as the reference variable . e.g: ng-model="xyz" then $scope.xyz would give you the desired value of the element.

This is how you can access the element value accordingly

answered Aug 28, 2016 at 22:00

Nikhilesh Shivarathri

1,68011 silver badges16 bronze badges

1 Comment

Sam Bush Over a year ago

Can you add this to the plnkr demo because I just tried using $scope.Color and $scope.Shape and neither works.

Collectives™ on Stack Overflow

AngularJS Proper way to pass variables

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related