metrodialog中按钮无法触发ng-click

metrodialog中按钮无法触发ng-click,第1张

有可能是metrodialog按钮与ng-click绑定的元素ID不一致,或者ng-click绑定的函数未正确定义导致的。可以先检查metrodialog按钮是否与ng-click绑定的元素ID一致,如果不一致,则需要修改metrodialog按钮的ID使其与绑定的元素ID一致。此外,也可以检查ng-click绑定的函数是否正确定义,如果函数未正确定义,则需要重新定义函数使其正确定义。

如图所示,完成一个下拉框

我们可以ng-model双向绑定一个变量,ng-init初始化一个0,下拉框初始化就默认是value为0的选项

这里有两种方式

1、ng-repeat

js中 $scopefruitList 是请求服务器获取的数据

2、ng-option

关于ng-option更多参考

>

我们之前在后台学过一个分页控件但是那个控件可以用在后端,因为后台不用考虑美观等等;但是分页在前台我们常常会根据自己的要求作出不同的改变,这时候再用分页控件就不太好了,因为一旦用了这个控件,分页栏的样式就很难更改(别人写的,都封装完了),所以这种真正展示给用户看的页面的分页我们通常自己写,自己来控制样式

①:我们知道,分页需要后台的数据支持和前台的样式处理那么后台应该做什么呢我们知道,要想在后台查询数据,前台应该给后台传入两个参数,分别是当前页码和每页显示的记录数;我们在前台把这两个参数封装在搜索条件选项里,在后台接收;首先进行的就是需要进行判断,如果这两个的值是空的话,我们应该给他们设置默认值,这样就不会出现没有数据的情况了

②:进行了判断之后,我们需要加上两个条件,才能在dao层完成分页,其实就是在query中设置值,分别是设置setOffset:从第几条记录开始查询(这个数的值是:(当前页-1)每页显示的记录数)和setRows(每页显示的记录数)

③:我们加上了条件之后,返回的数据中就会有关于分页的数据,我们定义一个Map集合,把关于分页的数据放进这个Map集合中就可以了;我们需要的数据是:总页数:getTotalPage 总记录数:getTotalElements 每页显示的记录数据:getContent  最后再返回这个amp集合,这样前台就能获取后台的分页数据了

①:其实这个分页的难点就在前台js的controller中的处理,我后台的返回结果中有总记录数和总页数了,我们想要在前台显示多少页,怎么控制呢很简单,我们如果有起始页和末尾页,然后我们根据这两个值进行遍历,然后把每个值放进同一个数组中,我们在前台页面用ng-repeat遍历取值就行了

②:那么我们就想了,我们想在前台页面框显示几页呢这就有了两种情况:一种是奇数,我们让当前页的前面和后面有这个奇数减去1再除以2,这样就有了我们想要的页数;另一种是偶数,偶数比奇数麻烦一点,我们采用一个规则:前面少,后面多,比如10页,我们就让当前页前4后5;这样一来,我们只要判断一下我们想要显示的页数的奇偶性,然后就能算出起始页了,末尾页就等于起始页加上显示页数-1就行了

③:要注意的事:我们要考虑集中情况:一种是当前页的前面不足我们想要的页数,我们就让起始页等于1;一种是当前页的后面不足我们想要的页数,我们就要让末尾页数等于总页数(最大页数);还有就是我们在设置了末尾页后,要重新设值初始页(因为如果当前页数后面不足我们想要的,那么一开始计算的初始页就是不对的,就会导致显示的页数不足),为了处理这种情况,我们利用末尾页减去要显示的页数-1,然后判断是不是小于等于1,是就让初始页等于1,大于1就让初始页等于末尾页减去要显示的页数-1

④:我们在js的controller中设置一个构建分页数据的方法,方法的参数是我们想要显示的页数,然后根据传入的数进行判断,用三元运算式进行赋值;得出初始页和末尾页,然后遍历望数组中放入值就可以了;这样一来,我们想要修改显示的页数,修改传入的数就行了

⑤:再就是处理上一页\下一页和页面跳转的功能,我们需要在js的controller中创建一个方法,这个方法是根据页码查询分页数据的方法,这个方法中首先是要判断传入的页码是不是小于1或者大于总页数,如果是就打断程序;如果不是就给搜索条件中的当前页赋值,然后在调用查询方法,加载分页数据

⑥:最后就在页面中的上一页\下一页和跳转页面的上面,添加ng-click调用我们根据页码查询的方法;还有一个不要忘了,就是我们点击当前页也加上方法,里面传入的是当前页码;还有不要忘了在查询方法中,在查询业务执行之前,把当前页进行一下parseInt的转换,防止传到后台的是字符串

其实做完上面的这些 *** 作,基本的功能都已经实现了,不过有一些小得bug或者功能需要去优化

①:第一个需要优化的就是:跳转之后,当前页不刷新的问题这个问题就是我们在上一个搜索结果中跳转完页面,比如说是共有10页,我们跳到第九页,然后我们再搜索下一个,如果这个搜索结果不足九页就不会显示;换句话说就是开启新的搜索时,当前页没有刷新,我们需要保证在每次开始搜索之前初始化一下当前页,所以在body标签中ng-init里让当前页为1就行了

②:上一页和下一页的disabled属性:这个属性是为了让我们的上一页在第一页的时候显示固定的样式,并且不能使用,同理下一页是在最后一页时失效;想要到达这个效果,我们控制上一页和下一页的disabled的出现时机就行了,我们用{{条件'disabled':''}}这样就能解决这个问题了

③:省略号的显示:如果起始页前面还有页码就显示省略号,没有就不显示;末尾页后面如果没有页码了,就不显示,还有就显示省略号为了好理解,我们在js的controller中创建两个变量,这两个变量开始的时候都是true,当起始页<=1或者末尾页>总页数时,改变对应的变量为false;然后在页面中的省略号位置,用ng-if调用对应的变量就行了

angularjs 事件click触发方法: AngularJS的onclick等事件只会触发controller方法闭包外的changeMoney才可以触发。

angularmodule()controller("", function(){ $scopechangeMoney = function(){ alert("此方法不会被调用"); }; }); var chan。。

你把scopeshppingButton = function(){} 放到 directive的controller property里试试

PS,我觉得shppingButton这个方法似乎并没有必要写到directive里去

以上就是关于metrodialog中按钮无法触发ng-click全部的内容,包括:metrodialog中按钮无法触发ng-click、ng中的下拉框动态加载数据,完成双向绑定、分页(不用插件)等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/9707869.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存