个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我真的是 AngularJS 的新手。我正在尝试创建一个简单的网络应用程序，它只不过是一个显示产品的页面。当用户点击下一步时，他们将被带到数组中的下一个产品。
目前我可以使用 ngRepeat 指令显示数组中的所有项目:
<body class="container" ng-controller="StoreController as store">
<center><div ng-repeat="product in store.products">
<img width="200" ng-src="{{product.images}}"/>
<h4>{{product.item}}</h4>
<h4>Amount: {{product.number}} count: {{count}}</h4>
<button ng-click="count = count + 1" ng-init="count=0">
Increase
</button>
<br>
<button ng-click="count = count - 1" ng-init="count=0">
Decrease
</button>
<br><br>
</h3>
<button class="button" >Add</button>
</div>
</center>
(function() {
var app = angular.module('store', [ ]);
app.controller('StoreController', function(){
this.products = items;
});
var items = [
{ item: 'Top', number: 2, images: 'shirt_icon.jpeg' },
{ item: 'Bottom', number: 5, images: 'pants_icon.jpg' },
{ item: 'Underwear', number: 3, images: 'underwear_icon.jpg' },
];
})();
但我真正想要的是有一个简单的“下一步”按钮，该按钮将使用数组中下一个的所有产品信息填充同一页面。
最佳答案
我删除了 ng-repeat 以便一次只显示一个项目，并将 store.nextProduct 和 store.prevProduct 添加到您的按钮以选择下一个或上一个项目。
<body class="container" ng-controller="StoreController as store">
<center>
<img width="200" ng-src="{{store.currentProduct.images}}"/>
<h4>{{store.currentProduct.item}}</h4>
<h4>Amount: {{store.currentProduct.number}}</h4>
<button ng-click="store.nextProduct()">
Increase
</button>
<br>
<button ng-click="store.prevProduct()">
Decrease
</button>
<br><br>
<button class="button">Add</button>
</center>
</body>
在 Controller 中，我实现了 next 和 prev 函数，并存储了一个索引来跟踪 View 中当前显示的项目。
var app = angular.module('store', []);
app.controller('StoreController', function(){
var productIndex = 0;
this.currentProduct = items[productIndex];
this.nextProduct = function() {
productIndex = productIndex+1;
this.currentProduct = items[productIndex];
};
this.prevProduct = function() {
productIndex = productIndex-1;
this.currentProduct = items[productIndex];
};
});
var items = [
{ item: 'Top', number: 2, images: 'shirt_icon.jpeg' },
{ item: 'Bottom', number: 5, images: 'pants_icon.jpg' },
{ item: 'Underwear', number: 3, images: 'underwear_icon.jpg' },
];
关于javascript - 在 ngClick 上获取数组中的下一项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27259337/
25
4
0
我有以下代码: X Y 如果选择了该值，我将切换类别。我想在图标上添加一个事件(仅在选择它时才可见)，但是，每当我单击该图标时，都会触发两个 ng-click。我的问题是:当选
我有一组元素，当单击其中一个元素时，应该切换一个类。我遇到的问题是，当单击其中一个元素时，所有元素都会收到切换的类。 Bold I
在 this fiddle ，为什么顶部链接中的 ngClick 可以工作，但我添加了自定义指令的链接中的 ngClick 完全无法运行？ A regular ng-click link A disa
在 AngularJS 中，是否有任何方法可以使 ng-click 依赖于 bool 值？ 例如，我希望以下文本(“点击”)可点击，但仅某些范围属性(例如，$rootScope.enableClick
在 AngularJS 中，是否有任何方法可以使 ng-click 依赖于 bool 值？ 例如，我希望以下文本(“点击”)可点击，但仅某些范围属性(例如，$rootScope.enableClick
我开发了一个经典的递归菜单，它自己构建得很好。问题是 ngClick 永远不会从递归指令的元素中触发。 我知道这是一个范围问题，我尝试了很多配置但没有运气。 这是看它的 fiddle :http://
使用 Angular Selenium Protractor 。选择按钮并通过 flow.js 使用 ngclick 作为执行器按钮完成上传。 仅在 Protractor 下，当选择无效的内部格式化
我正在尝试根据设备类型切换功能。我有一个可点击的设置选项卡。在桌面版本中，ngClick 应重定向到默认 url。但是，在移动版本中，单击相同的链接将打开一个模式。我做了这样的事情 设置.Html -
在我的 Angular View 中，我有一个输入字段和一些使用 ng-click 的可点击的东西。 当单击这些 ng-clicks 之一时，是否有 Angular 方式或简单的 vanilla js
我想在运行时触发元素的 ng-click，例如: _ele.click(); 或 _ele.trigger('click', function()); 如何做到这一点？ 最佳答案 语法如下: func
考虑以下指令:(Live Demo) app.directive('spinner', function() { return { restrict: 'A', scope: {
这是一个指令，我试图在其中禁用基于模型值的链接: app.directive('disableable', function($parse){ return { restric
我已经获取了一个跨度，单击该跨度后，它会加 1。但我需要的是，ngclick 应该只添加一次到范围内的任何值。再次点击它应该减去 1。它不应该连续迭代。我从 json 数据中获取 {{tvshow.e
我是 Angular 的新手。 ng-click 似乎是一个非常核心的指令，我不明白如何在没有 ng-click 的情况下制作应用程序。我错过了什么吗？显然它已被弃用。文档指向我 fastclick
是否有一种可能的解决方案，可以在每次点击时增加一个变量并将其传递给一个函数？我试过做这样的事情，但它不起作用。 最佳答案 您可以在同一个 ng-click 中增加和调用 assignTasks 函数
我有一个 div ，其中附加了 Angular ng-click 指令。将鼠标悬停在该元素上时，鼠标指针不会改变。有没有办法通过CSS改变它？我知道我可以简单地在其上附加一个 anchor 标记，但我
我有以下元素， value 我知道我可以使用ng-click指令，但是我必须从 Controller 调用一个函数。当用户单击时，我想触发示例 test-directive 中调用的指令 testMo
是否可以将 ngClick 事件处理程序设置为捕获阶段，如 this article 中所述.我想防止事件在捕获阶段满足父级条件时向下传递给子级并再次冒泡。 最佳答案 在所有 Angular 事件指令
我似乎无法弄清楚为什么 ng-click 指令对复制的 DOM 元素不起作用。 这是 fiddle : http://jsfiddle.net/BkRqa/4/ 我可以单击+插入新字段集，但用于删除添
我在指令中有以下内容 scope.actions = { getSearch: searchResultPageService.getSearch(scope.keywords, scope.
我是一名优秀的程序员,十分优秀！