AngularJS

Question

我正在尝试构建一个类似简单 iPhone 布局的网络应用程序副本，其中只有主屏幕（显示 "installed" 个应用程序）和一个显示所有可用应用程序的应用程序商店。

当您在应用商店中单击某个应用时，我想访问该应用（div 的）ID 并触发一个将 ID 作为参数发送的函数。该函数应该简单地将 ID 添加到数组中，并且可能（如果可能的话）link 到不同的页面。

到目前为止，我的模型中有这个：

var dummyApp = angular.module("dummyApp", [ "ngRoute"]);

.controller('appController', ['$scope', function($scope) {
$scope.homeApps = [
  {id:"1", name:"Dummy", link:"#/"},
  {id:"2", name:"Dummy", link:"#/"}];

$scope.allApps = [
  {id:"1", name:"Dummy", link:"#/"},
  {id:"2", name:"Dummy", link:"#/"},
  {id:"3", name:"Dummy", link:"#/"}];

$scope.addApp = function(id) {
  $scope.homeApps.push({id:id, name:"new app", link:"/#/"});
};
}]);

简而言之，我想单击一个元素（allApps 数组的一部分），发送 addApp 函数并提供 ID（如果可能，可以从 allApps 数组中获取？）并将其推送到 homeApps（应用程序到主屏幕）

这应该模拟按下一个应用程序，然后当您返回主屏幕时，它会显示在数组中。

我的 HTML 看起来是这样的：

<div ng-click="adApp('3');" class="app" style="background-image:url('icons/{{app.id}}.png');">
</div>

现在我只是发送一个静态的“3”作为 ID，但你明白了:)

任何帮助appriciated！

Answer 1

你非常接近，只需使用 ng-click="addApp(app.id)" 作为你的 div。

但您遇到的实际问题是，通过对两条路线使用相同的控制器，并且没有共享位置来存储主屏幕上的应用程序集合，您最终会反复重新创建同一套原始应用程序主屏幕上的应用程序。

相反，您需要做的是创建某种 Angular 服务，该服务将被正确初始化，然后允许添加应用程序。这将被注入到您的 appController 中，这样您每次都可以访问同一个集合，而不是每次控制器运行.

时都创建一个新集合

您可以看到我创建的 a Plunkr 演示了一个非常简单的示例。

代码内容如下：

创建基本服务：

(function (dummyApp) {
  var homeApps = [
    {id:"1", name:"Dummy", link:"#/"},
    // ...
    {id:"10", name:"Dummy", link:"#/"}];

    dummyApp.factory('homeApps', function () {
      return homeApps;
    });
})(dummyApp);

然后在你的控制器中使用它：

dummyApp.controller('appController', ['$scope', 'homeApps', function($scope, homeApps) {
  $scope.homeApps = homeApps;

  $scope.allApps = [
    {id:"1", name:"Dummy", link:"#/"},
    // ...
    {id:"28", name:"Dummy", link:"#/"}];

  $scope.addApp = function(id) {
    homeApps.push({id:id, name:"new app", link:"#/"});
  };
}]);

当然，我可能会创建一些 "classes"（好吧，等效的 JS）来公开一个很好的 API 来操纵每个应用程序，以及一个允许您添加和删除应用程序的集合从本身。然后创建一个公开此 API 的 homeScreen 服务。但这取决于你。这将帮助您入门。

AngularJS - 单击对象，访问它的 ID 并触发一个以该 ID 作为参数的函数

AngularJS - Click on object, access it's ID & fire a function with that ID as parameter

html

javascript

arrays

angularjs-ng-click