Angularjs - Two functions in one file

Asked

Viewed 416 times

2

I would like to put in the same file the two functions below, but when I do this, the second function (notebooks) no longer respond.

Filing cabinet App.js:

(function () {
'use strict';
var module = angular.module('app', ['onsen']);

module.controller('myCtrl', function ($window, $scope) {
    $scope.myFunction = function (item) {
        var url = String(window.location);
        url = url.substr(0, String($window.location.href).indexOf("www") + 4);
        $window.location.href = url + item.mmyurl;

    }
});


 })();

Another file exemplo.js:

function NotebookListCtrl($scope) {
$scope.notebooks = [
{"name": "Lenovo",
 "procesor": "Intel i5",
 "age": 2011},
{"name": "Toshiba",
 "procesor": "Intel i7",
 "age": 2010},
{"name": "Toshiba",
 "procesor": "Intel core 2 duo",
 "age": 2008},
{"name": "HP",
 "procesor": "Intel core 2 duo",
 "age": 2012},
{"name": "Acer",
 "procesor": "AMD",
 "age": 2006},
{"name": "Lenovo",
 "procesor": "Intel i5",
 "age": 2009},
{"name": "Toshiba",
 "procesor": "Intel i7",
 "age": 2008},
{"name": "Lenovo",
 "procesor": "Intel i5",
 "age": 2011},
{"name": "Toshiba",
 "procesor": "Intel i7",
 "age": 2010},
{"name": "Toshiba",
 "procesor": "Intel core 2 duo",
 "age": 2008},
{"name": "HP",
 "procesor": "Intel core 2 duo",
 "age": 2012},
{"name": "Acer",
 "procesor": "AMD",
 "age": 2006},
{"name": "Lenovo",
 "procesor": "Intel i5",
 "age": 2009},
{"name": "Toshiba",
 "procesor": "Intel i7",
 "age": 2008},
{"name": "Lenovo",
 "procesor": "Intel i5",
 "age": 2011},
{"name": "Toshiba",
 "procesor": "Intel i7",
 "age": 2010},
{"name": "Toshiba",
 "procesor": "Intel core 2 duo",
 "age": 2008},
{"name": "HP",
 "procesor": "Intel core 2 duo",
 "age": 2012},
{"name": "Acer",
 "procesor": "AMD",
 "age": 2006},
{"name": "Lenovo",
 "procesor": "Intel i5",
 "age": 2009},
{"name": "Toshiba",
 "procesor": "Intel i7",
 "age": 2008}
 ];
  $scope.orderList = "name";
    }

I want to merge these two files into one. I’m using the framework Onsen UI.

<body>
    <div id="notebooks" ng-app ng-controller="NotebookListCtrl">
        <input type="text" id="query" ng-model="query"/>
        <select ng-model="orderList">
            <option value="name">By name</option>
            <option value="-age">Newest</option>
            <option value="age">Oldest</option>
        </select>
        <ul id="notebook_ul">
            <li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
                name: {{notebook.name}}<br/>
                procesor: {{notebook.procesor}}<br/>
                <div class="right top">{{notebook.age}}</div>
            </li>
        </ul>
        <span>Number of notebooks: {{notebooks.length}}</span>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
    <script src="js/index.js"></script>
</body>
javascript angularjs

2 answers

1


You set the $Scope values of the notebook outside of a Function. The way you did, you would need to 'call' it in order to generate the values.

I mean, you should do it like this:

function NotebookListCtrl($scope) {
    $scope.notebooks = [
        {"name": "Lenovo","procesor": "Intel i5","age": 2011},
        {.. restante aqui ..}
        {"name": "Toshiba","procesor": "Intel i7","age": 2008}
    ];
    $scope.orderList = "name";
}
NotebookListCtrl($scope);

But to simplify the code, as it already has the array you want, you can integrate everything into a controller as follows:

(function () {
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('myCtrl', function ($window, $scope) {
        $scope.myFunction = function (item) {
            var url = String(window.location);
            url = url.substr(0, String($window.location.href).indexOf("www") + 4);
            $window.location.href = url + item.mmyurl;
        };

        $scope.notebooks = [
            {"name": "Lenovo","procesor": "Intel i5","age": 2011},
            {.. restante aqui ..}
            {"name": "Toshiba","procesor": "Intel i7","age": 2008}
        ];
        $scope.orderList = "name";

    });

})();

See if it works.

And managed to understand the logic?

    1. And you understood the logic? Yes I understand, his explanation was excellent, 2.See if it works; I don’t know if it’s still, some mistake of mine or because I’m using Onsen ui (maybe conflict) .. ms did not work I made a copy of the sample file https://dl.dropboxusercontent.com/u/103204235/Teste%20controles%20angular%20js.rar

  • But some error appears in the console.log?

  • I’m using visual studio Cordova (template) so it goes right through

  • it runs in the browser, da para testar usando o browser e o Notepad

  • Yeah, then I won’t know how to help you, because I only work with Angularjs. But the logic of the function is that. Try a console.log($Scope.notebooks); well before you close the controller and see if it pops up the values, which will probably show up. If it does not appear, there must be some error or conflict.

  • but the project is pure angular js. is only created within the visual studio. removing the files from the ide gets so angular and html. as left in the file

  • Ok. But what is it not working exactly? Doesn’t it show the list of notebooks? Doesn’t it do the right order? Try to log as I commented and pass the information later, explaining exactly what is happening

  • Now gave , kkk discovered the error was worth your help

  • Ok. Good luck with development! = D

Show 4 more comments

0

Error : <div id="notebooks" ng-app ng-controller="NotebookListCtrl"> Changing to <div id="notebooks" ng-app ng-controller="myCtrl"> worked

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.