AngularJS - Two functions in one file only

2

I'd like to put the two functions below in the same file, but when I do this, the second function ( notebooks ) stops responding.

File 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 put these two files together. I am using the Onsen UI framework.

<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>
    
asked by anonymous 11.11.2015 / 01:11

2 answers

1

You set the notebook's $ scope values out of a function. The way you did it would be necessary to 'call' it to generate the values.

That is, you should do so:

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, since it already has the array you want, you can integrate everything into a controller in the following way:

(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 did you understand logic?

    
11.11.2015 / 01:18
0

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

    
11.11.2015 / 02:23