How to change controller from view with json in angularjs

Question

Hi I am new to angularjs I was wondering if were possible to send stuff that was already loaded in the view from json back to the controller. What I am trying to do is to send the letters back to a controller and create a way to iterate over them with a intervale then change the style of each controller right now I am stuck because I can't get the ng-module="single" back to the interval controller name

Here is the view

<!DOCTYPE html>
<html lang="en-us" ng-app="App">
<body ng-controller="mainController"   ng-click="textArea = textArea + 1">
        <div ng-controller="clickController">
<div class="container">

            <div ng-controller="intervalController">

                <ul class="general_button"ng-repeat="letter in language[0].rows"> 
                    <button type="button" ng-model="single += single" class="btn btn-info" ng-repeat="single in letter"> 
                         {{single}}
                    </button>
                </ul>

                <div  >

                    <h1 ng-mousemove="textArea = textArea + 1">Mouse over me!</h1>

                    <label for="inputlg">input-lg</label>
                    <input class="form-control input-lg" id="inputlg" type="text" value="{{ textArea }}">
                </div>

            </div>
        </div>


    </div>
    </body>
</html>

Here are the controllers

var App = angular.module('App', []);
var theLanguage = 'english';
App.controller('mainController', function($scope, $http,$log) {
  $http.get(theLanguage + '.json')
       .then(function(res){
          $scope.language = res.data;                
        });
$log.debug('Hello Debug!');
});

App.controller('intervalController', function($scope, $log) {
    this.$log = $log;
    var name = $scope.single;

    $log.log(name);
  $log.log('Hello World!');

});

App.controller('clickController', function($scope) {

});

and here is the Json

[{
    "rows":[[
        "a",
        "e",
        "u",
        "i",
        "o",
        "y"
    ],
    [
        "b",
        "c",
        "d",
        "f",
        "g"
    ],
    [
        "h",
        "i",
        "j",
        "k",
        "l"
    ],
    [
        "m",
        "n",
        "p",
        "q",
        "r"
    ],
    [
        "s",
        "t",
        "v",
        "w",
        "x z"
    ]
]}]

Thank you in advance for your help any suggestions about how to do this a better way would also be appreciated.

Larry Turtis · Accepted Answer · 2016-08-04 17:47:42Z

1

It's a bad idea to try to set ng-model and ng-repeat on the same element. You have the model already, letter. Letter is bound to the view, so anything the user changes in letter will be accessible in the controller. You should be able to just remove

ng-model="single += single"

And then interate over letter inside the controller:

angular.forEach($scope.letter, function(single) {
    //do something with single
});

answered Aug 4, 2016 at 17:47

Larry Turtis

1,91614 silver badges26 bronze badges

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

1 Comment

Aaron Rabinowitz Over a year ago

I tried adding angular.forEach($scope.letter, function(single) { $log.log(single); }); but it didn't seem to work

Collectives™ on Stack Overflow

How to change controller from view with json in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related