我有我试图建立与角小组合项目中,我一直在使用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
< DIV NG控制器=portfolioController为myPortfolio><! - 各种HTML页面页眉等 - > < DIV CLASS =行NG-重复=项目myPortfolio.projects> < DIV CLASS =大两列ID =侧边栏> < H1> {{project.name}}< / H1> &所述p为H.; {{project.description}}&下; / P> < DIV CLASS =行边NAV-DIV> < DIV CLASS =大4列项目导航> <按钮式=按钮级=slick- $ P $光伏光滑残疾左> previous< /按钮> < / DIV> < DIV CLASS =大4列项目,导航中心> < / DIV> < DIV CLASS =大4列项目导航> <按钮式=按钮级=油滑下一光滑的残疾人权利NG点击=>接下来< /按钮> < / DIV> < DIV的风格=明确:既>< / DIV> < / DIV> < / DIV> < DIV CLASS =大10列ID =主部> < DIV CLASS =slider1> < DIV CLASS =功能IMGNG重复=,在project.images形象> < IMG NG-SRC ={{图像}}/> < / DIV> < / DIV> < / DIV> < / DIV>< / DIV>
解决方案
最简单的办法:
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
< DIV NG控制器=portfolioController为myPortfolio>< UL><李NG重复=项目myPortfolio.projectsNG点击=$ parent.activeProject = $指数> {{project.name}}< /李>< / UL><! - 各种HTML页面页眉等 - > < DIV CLASS =行NG-重复=项目myPortfolio.projectsNG秀=$指数== $ parent.activeProject> < DIV CLASS =大两列ID =侧边栏> < H1> {{project.name}}< / H1> &所述p为H.; {{project.description}}&下; / P> < DIV CLASS =行边NAV-DIV> < DIV CLASS =大4列项目导航> <按钮式=按钮级=slick- $ P $光伏光滑残疾左NG残疾=$指数== 0NG点击=activeProject = $指数-1> previous< /按钮> < / DIV> < DIV CLASS =大4列项目,导航中心> < / DIV> < DIV CLASS =大4列项目导航> <按钮式=按钮级=油滑下一光滑的残疾人权利NG-禁用=$指数==(myPortfolio.projects.length-1)NG点击=activeProject = $指数+ 1 >接下来< /按钮> < / DIV> < DIV的风格=明确:既>< / DIV> < / DIV> < / DIV> < DIV CLASS =大10列ID =主部> < DIV CLASS =slider1> < DIV CLASS =功能IMGNG重复=,在project.images形象> < IMG NG-SRC ={{图像}}/> < / DIV> < / DIV> < / DIV> < / DIV>< / DIV>
请注意在项目中加入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
上一篇:角js和引导用户界面日期选择器无法在Chrome上点击图标打开用户界面、图标、日期、选择器
下一篇:angular.element replaceWith不工作工作、angular、element、replaceWith