使用 ng-click 在 Angular js 中显示 div
Using ng-click to show divs in Angular js
所以我在 html 框中有一个 link,当单击 link 时,我试图让它显示一组全新的 div 来替换当前的 div。
我试过了:
<a href="" ng-click="Search('Show Products A B C')" > Show Products </a>
Search 调用控制器中的函数,其中 returns A B C 产品的数据,然后使用
显示
<div ng-repeat="products in Search( 'Show Products A B C')" </div>
我基本上是想做这样的事情:
<div ng-repeat=" href="" ng-click="Search('Show Products A B C')"> </div>
这不是我理解的正确语法。
但是现在什么也没有发生。
基本上从那个 ng-click 我想调用那部分代码 (ng-repeat) 因为现在它们没有连接。
谢谢
ng-repeat
将响应其参数的变化,但您的参数是一个函数 Search()
。我建议如下:
在您的搜索功能中:
$scope.Search = function(arg) {
// do your search logic
$scope.productList = <search result list>
}
然后在 html
<div ng-repeat="products in productList" </div>
你应该做的是将一些 数组或对象 A 绑定到 $scope,然后当你调用搜索时你 更新 A,更改将反映在您的视图中
$scope.show=true;
$scope.products =[A,B,C];
$scope.Search = function() {
// do list update
$scope.show=false;
$scope.products =[D,E,F] ;
}
您还需要将 ng-repeat 更改为:
<div ng-repeat="product in products" </div>
并将ng-show添加到第一个link:
<a href="#" ng-show = "show" ng-click="search();">Click Me</a>
编辑:
检查 this fiddle 以获取工作示例。
编辑:
Fiddle 已更新以反映最新更改。
所以我在 html 框中有一个 link,当单击 link 时,我试图让它显示一组全新的 div 来替换当前的 div。 我试过了:
<a href="" ng-click="Search('Show Products A B C')" > Show Products </a>
Search 调用控制器中的函数,其中 returns A B C 产品的数据,然后使用
显示<div ng-repeat="products in Search( 'Show Products A B C')" </div>
我基本上是想做这样的事情:
<div ng-repeat=" href="" ng-click="Search('Show Products A B C')"> </div>
这不是我理解的正确语法。 但是现在什么也没有发生。 基本上从那个 ng-click 我想调用那部分代码 (ng-repeat) 因为现在它们没有连接。 谢谢
ng-repeat
将响应其参数的变化,但您的参数是一个函数 Search()
。我建议如下:
在您的搜索功能中:
$scope.Search = function(arg) {
// do your search logic
$scope.productList = <search result list>
}
然后在 html
<div ng-repeat="products in productList" </div>
你应该做的是将一些 数组或对象 A 绑定到 $scope,然后当你调用搜索时你 更新 A,更改将反映在您的视图中
$scope.show=true;
$scope.products =[A,B,C];
$scope.Search = function() {
// do list update
$scope.show=false;
$scope.products =[D,E,F] ;
}
您还需要将 ng-repeat 更改为:
<div ng-repeat="product in products" </div>
并将ng-show添加到第一个link:
<a href="#" ng-show = "show" ng-click="search();">Click Me</a>
编辑:
检查 this fiddle 以获取工作示例。
编辑:
Fiddle 已更新以反映最新更改。