可点击的带有Angular的Bootstrap行

10 浏览
0 Comments

可点击的带有Angular的Bootstrap行

我有一个用Bootstrap样式的表格。这个表格的内容是用Angular.js填充的。我该如何使一行可点击，从而调用作用域中的一个函数？

以下代码对我无效（ng-click部分）：

表格：

    

        
            

                名称
                状态
            

        
        
            

                {{ ingredient.name }}
                {{ ingredient.status }}

控制器：

$scope.setSelected = function(index) {
    $scope.selected = $scope.ingredients[index];
    console.log($scope.selected);
};

0

3 答案

0 Comments

问题的出现原因是在ng-repeat指令中，使用了ng-click指令来处理行的点击事件，但是在setSelected方法中，没有正确地将选中的ingredient传递给方法。

解决方法是在ng-click指令中传递ingredient参数，即修改ng-click指令为ng-click="setSelected(ingredient);"，并且在setSelected方法中接受并处理该参数，即修改$scope.setSelected方法为$scope.setSelected = function(item) { ... };。这样就可以正确地将选中的ingredient传递给方法并进行处理。

0
0 Comments

在上述代码中，问题的原因是在表格中的某一行（tr）被点击时，无法实现点击效果和选择效果。解决方法是使用Bootstrap和Angular来实现可点击的表格行。

首先，需要在HTML中添加Bootstrap样式类“table-hover”来实现鼠标悬停时的背景颜色变化。代码如下：



接下来，在CSS中添加以下代码，以实现当鼠标悬停在表格行上时，其背景颜色变为灰色：
.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}



然后，如果想要使表格行可选择，可以在HTML中的相应行（tr）上添加Angular的ng-click指令，并设置触发的事件（doSomething()）。代码如下：


最后，在CSS中添加以下代码，以改变可选择表格行的鼠标样式为手型光标：
tr[ng-click] {
    cursor: pointer;
}



通过以上步骤，我们可以实现在点击表格行时，触发doSomething()事件，并且鼠标悬停时表格行背景颜色变为灰色的效果。
如果想查看完整的示例代码，可以点击以下链接查看JSFiddle示例：
[View JSFiddle Sample](http://jsfiddle.net/pdorgambide/vb7tmLp4/)

									
0

	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
使用Bootstrap和Angular的时候，有一个点击事件无法触发的问题，即点击某一行时无法获取到对应的数据。为了解决这个问题，我们可以通过将参数传递给ng-click指令来解决。具体操作如下：


1. 在HTML中，可以通过ng-click="setSelected(ingredient)"将参数传递给点击事件。


2. 在控制器中，定义一个setSelected函数来处理点击事件，并将传递的参数赋值给$scope.selected变量。




$scope.setSelected = function(my_ingredient) {
     $scope.selected = my_ingredient;
     console.log($scope.selected);
   };




3. 通过console.log输出$scope.selected的值，以确保参数已经成功传递并赋值给$scope.selected。


通过以上步骤，我们可以解决Bootstrap和Angular中点击事件无法获取到对应数据的问题。

									

				

									

			

			
0

		

	



                                
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
                    

                                        
















									
				
			
			
		
	

											

					
							

		

								




		
             不起作用？