有密码强度显示的角度js故障

Question

我是新的角js和写指令显示密码强度。

这是小提琴- 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的颜色。

任何帮助都很感激。

提前谢谢。

更新：

这是更新的小提琴(仍然不像预期的那样工作)- 123/3hruj8ce/13/

Answer 1

除非您键入一个疯狂的字符串作为密码，否则大多数情况下您的强度计算公式总是返回1。

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

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

至

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

改变你的公式来降低我相信的力量。

更新:针对一、二或三里，您可以将类添加到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;}

Answer 2

我更新了小提琴https://jsfiddle.net/3hruj8ce/14/

应该通过将li元素的类名更改为强/中/弱来更改它们的颜色。请查收。

Answer 3

似乎您还没有定义这些：

.strong   { color: #060; border-color: #0F0;}
.medium   { color: #C60; border-color: #FC0;}
.weak     { color: #900; border-color: #F00;}

在你的列表/HTML中。