javascript - Angular JS 密码强度显示出现问题

Question

我是 Angular js 的新手，并且编写指令来显示密码强度。

这是 fiddle - https://jsfiddle.net/user_123/3hruj8ce/12/

 <span  data-ng-show='passwordForm.password.$valid && passwordForm.password.$dirty' data-ng-class="strength">
     <li class="point"></li >      
     <li  class="point"></li>
     <li  class="point"></li>         
     <li  class="point"></li> 
</span>

当用户开始输入密码时，我无法更新 li 的颜色。

非常感谢任何帮助。

提前致谢。

更新:

这是更新后的 fiddle (仍然没有按预期工作..) - https://jsfiddle.net/user_123/3hruj8ce/13/

Answer 1

大多数情况下，强度计算公式始终返回 1，除非您输入疯狂的字符串作为密码。

无论如何，要修复 css 类(强、中、弱)，您需要更改

.strong   { color: #060; border-color: #0F0;}

至

.strong > li.point   { background-color: #060; border-color: #0F0;}

并更改您的公式以降低我认为的强度。

更新:要定位 1、2 或 3 个 li，您可以将您的类(class)添加到 li，如下所示

<li class="point weak"><li>
<li class="point weak medium"><li>
<li class="point weak medium strong"><li>

并将CSS更改为

.strong > li.strong{background-color: #060; border-color: #0F0;}
.medium > li.medium{background-color: #080; border-color: #0F0;}
.weak > li.weak{background-color: #099; border-color: #0F0;}