通过JSON数据阵列Angular.js点击？ [英] Angular.js click through json data array?

查看：138
本文介绍了通过JSON数据阵列Angular.js点击？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有我试图建立与角小组合项目中，我一直在使用NG-重复重复在我的投资组合中的项目。但我只是想1（第一批）项目展示。我在边栏有点导航和我希望能够通过在项目中的项目点击。我完全新角，但到目前为止，我心中已经读入的路由和模板，但我不希望使用外部HTML文件。任何建议都多少AP preciated！

使用Javascript：

  VAR应用= angular.module（'myPortfolio'，[]）;VAR pageContent = [
    {
        displayOrder：1，
        名称：项目1，
        说明：一些描述，
        图片：IMG /投资/ feat_image_1.jpg]
    }，
    {
        displayOrder：2，
        名称：项目2，
        说明：一秒钟说明
        图片：IMG /投资/ feat_image_2.jpg]
    }，
    {
        displayOrder：3，
        名称：项目3，
        介绍：第三个描述，
        图片：IMG /投资/ feat_image_3.jpg]
    }
];app.controller（portfolioController功能（$范围）{
    this.projects = pageContent;
}）;

HTML 

 ＆LT; D​​IV NG控制器=portfolioController为myPortfolio＆GT;＆LT;！ - 各种HTML页面页眉等 - ＆GT;  ＆LT; D​​IV CLASS =行NG-重复=项目myPortfolio.projects＆GT;      ＆LT; D​​IV CLASS =大两列ID =侧边栏＆GT;
        ＆LT; H1＆GT; {{project.name}}＆LT; / H1＆GT;
        ＆所述p为H.; {{project.description}}＆下; / P＆GT;
        ＆LT; D​​IV CLASS =行边NAV-DIV＆GT;
          ＆LT; D​​IV CLASS =大4列项目导航＆GT;
            ＆LT;按钮式=按钮级=slick- $ P $光伏光滑残疾左＆GT; previous＆LT; /按钮＆GT;
          ＆LT; / DIV＆GT;
          ＆LT; D​​IV CLASS =大4列项目，导航中心＆GT;
          ＆LT; / DIV＆GT;
          ＆LT; D​​IV CLASS =大4列项目导航＆GT;
            ＆LT;按钮式=按钮级=油滑下一光滑的残疾人权利NG点击=＆gt;接下来＆LT; /按钮＆GT;
          ＆LT; / DIV＆GT;
          ＆LT; D​​IV的风格=明确：既＆GT;＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =大10列ID =主部＆GT;
        ＆LT; D​​IV CLASS =slider1＆GT;
          ＆LT; D​​IV CLASS =功能IMGNG重复=，在project.images形象＆GT;
             ＆LT; IMG NG-SRC ={{图像}}/＆GT;
          ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;


解决方案

最简单的办法：

  app.controller（portfolioController功能（$范围）{
    $ scope.projects = [
    {
        displayOrder：1，
        名称：项目1，
        说明：一些描述，
        图片：IMG /投资/ feat_image_1.jpg]
    }，
    {
        displayOrder：2，
        名称：项目2，
        说明：一秒钟说明
        图片：IMG /投资/ feat_image_2.jpg]
    }，
    {
        displayOrder：3，
        名称：项目3，
        介绍：第三个描述，
        图片：IMG /投资/ feat_image_3.jpg]
    }
    ];    $ scope.activeProject = 0;}）;

您的HTML 

 ＆LT; D​​IV NG控制器=portfolioController为myPortfolio＆GT;＆LT; UL＆GT;＆LT;李NG重复=项目myPortfolio.projectsNG点击=$ parent.activeProject = $指数＆GT; {{project.name}}＆LT; /李＆GT;＆LT; / UL＆GT;
＆LT;！ - 各种HTML页面页眉等 - ＆GT;  ＆LT; D​​IV CLASS =行NG-重复=项目myPortfolio.projectsNG秀=$指数== $ parent.activeProject＆GT;      ＆LT; D​​IV CLASS =大两列ID =侧边栏＆GT;
        ＆LT; H1＆GT; {{project.name}}＆LT; / H1＆GT;
        ＆所述p为H.; {{project.description}}＆下; / P＆GT;
        ＆LT; D​​IV CLASS =行边NAV-DIV＆GT;
          ＆LT; D​​IV CLASS =大4列项目导航＆GT;
            ＆LT;按钮式=按钮级=slick- $ P $光伏光滑残疾左NG残疾=$指数== 0NG点击=activeProject = $指数-1＆GT; previous＆LT; /按钮＆GT;
          ＆LT; / DIV＆GT;
          ＆LT; D​​IV CLASS =大4列项目，导航中心＆GT;
          ＆LT; / DIV＆GT;
          ＆LT; D​​IV CLASS =大4列项目导航＆GT;
            ＆LT;按钮式=按钮级=油滑下一光滑的残疾人权利NG-禁用=$指数==（myPortfolio.projects.length-1）NG点击=activeProject = $指数+ 1 ＆gt;接下来＆LT; /按钮＆GT;
          ＆LT; / DIV＆GT;
          ＆LT; D​​IV的风格=明确：既＆GT;＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =大10列ID =主部＆GT;
        ＆LT; D​​IV CLASS =slider1＆GT;
          ＆LT; D​​IV CLASS =功能IMGNG重复=，在project.images形象＆GT;
             ＆LT; IMG NG-SRC ={{图像}}/＆GT;
          ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

请注意在项目中加入activeProject变量，NG-查看详细情况清单，并fieht项目名称的菜单选择项目

I have a small portfolio project I'm trying to build with Angular, I have the projects in my portfolio repeated using ng-repeat. But I just want 1 (the first) project to show. I have a little navigation in the sidebar and I want to be able to click through the items in the projects. I'm totally new to Angular, but so far I'v read into routing and templates but I don't want to use external html files. Any suggestions are much appreciated!

Javascript:

var app = angular.module('myPortfolio', []);

var pageContent = [
    {
        displayOrder: 1,
        name: 'Project 1',
        description: "Some description",
        images: ["img/portfolio/feat_image_1.jpg"]
    },
    {
        displayOrder: 2,
        name: 'Project 2',
        description: "A second description",
        images: ["img/portfolio/feat_image_2.jpg"]
    },
    {
        displayOrder: 3,
        name: 'Project 3',
        description: "A third description",
        images: ["img/portfolio/feat_image_3.jpg"]
    }
];

app.controller("portfolioController", function($scope) {
    this.projects = pageContent;
});

HTML:

<div ng-controller="portfolioController as myPortfolio">

<!-- various html page header etc. --> 

  <div class="row" ng-repeat="project in myPortfolio.projects">

      <div class="large-2 columns" id="sidebar">
        <h1>{{project.name}}</h1>
        <p>{{project.description}}</p>
        <div class="row side-nav-div">
          <div class="large-4 columns project-nav">
            <button type="button" class="slick-prev slick-disabled left">Previous</button>
          </div>
          <div class="large-4 columns project-nav centered">
          </div>
          <div class="large-4 columns project-nav">
            <button type="button" class="slick-next slick-disabled right" ng-click="">Next</button>
          </div>
          <div style="clear:both"></div>
        </div>
      </div>
      <div class="large-10 columns" id="main-section">
        <div class="slider1">
          <div class="feature-img" ng-repeat="image in project.images">
             <img ng-src="{{image}}"/>
          </div>
        </div>
      </div>

  </div>
</div>

解决方案

Easiest solution:

app.controller("portfolioController", function($scope) {
    $scope.projects = [
    {
        displayOrder: 1,
        name: 'Project 1',
        description: "Some description",
        images: ["img/portfolio/feat_image_1.jpg"]
    },
    {
        displayOrder: 2,
        name: 'Project 2',
        description: "A second description",
        images: ["img/portfolio/feat_image_2.jpg"]
    },
    {
        displayOrder: 3,
        name: 'Project 3',
        description: "A third description",
        images: ["img/portfolio/feat_image_3.jpg"]
    }
    ];

    $scope.activeProject=0;

});

your HTML

<div ng-controller="portfolioController as myPortfolio">

<ul><li ng-repeat="project in myPortfolio.projects" ng-click="$parent.activeProject=$index">{{project.name}}</li></ul>
<!-- various html page header etc. --> 

  <div class="row" ng-repeat="project in myPortfolio.projects" ng-show="$index==$parent.activeProject">

      <div class="large-2 columns" id="sidebar">
        <h1>{{project.name}}</h1>
        <p>{{project.description}}</p>
        <div class="row side-nav-div">
          <div class="large-4 columns project-nav">
            <button type="button" class="slick-prev slick-disabled left" ng-disabled="$index==0" ng-click="activeProject=$index-1">Previous</button>
          </div>
          <div class="large-4 columns project-nav centered">
          </div>
          <div class="large-4 columns project-nav">
            <button type="button" class="slick-next slick-disabled right"  ng-disabled="$index==(myPortfolio.projects.length-1)" ng-click="activeProject=$index+1">Next</button>
          </div>
          <div style="clear:both"></div>
        </div>
      </div>
      <div class="large-10 columns" id="main-section">
        <div class="slider1">
          <div class="feature-img" ng-repeat="image in project.images">
             <img ng-src="{{image}}"/>
          </div>
        </div>
      </div>
  </div>
</div>

note the addition of activeProject variable, ng-show in the projects details list and a menu fieht the project names to select the project

这篇关于通过JSON数据阵列Angular.js点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆