Css angularjs自定义复选框按钮

嗨，我正在尝试在我的angularjs应用程序中创建一个自定义样式的复选框。每次用户选中或取消选中复选框时，它都会向服务器发送一个调用。但是，有时当我选中或取消选中时，它会通过$HTPP服务向服务器发送null。有什么问题吗

顺便说一句，当我使用非样式的普通复选框时，它可以完美地工作

checkbox.html

        <!-- Custom checkbox portion of the html page -->
        <div class="criteria-two-col" ng-repeat="value in searchcriterias.gender">
             <div data-ng-click="newsearch('gender')">
             <input type='checkbox' class="styled-checkbox" id="gender{{value}}" value="    
         {{value}}" check-list='checked_gender'/>
             <label for="gender{{value}}"><span></span>{{value}}</label>
            </div>
         </div>

---

不知道为什么要发布css代码，问题更多地与控制器和/或指令相关。作为字符串的性别作为参数看起来可疑，并且您没有ng模型，所以确实需要显示ng clcik的控制器代码。更好的是…在jsfiddle.net或plunker中创建一个演示。问题是$http服务有时会发布一个空值，而不是性别值，例如男性或女性。我相信这可能与css方面有关，因为当我使用普通的复选框时，它工作得很好。可能……但从简单的标记和css到了解事件和ajax为什么没有达到预期效果还有很长的路要走……创建一个演示。我很惊讶没有在复选框上使用ng更改而不是在div上使用clcik。好的，我将创建一个演示。谢谢

   /*Custom checkbox styling*/

 input[type="checkbox"].styled-checkbox {
   display: none;
     }

  input[type="checkbox"] + label {
  color:#000;
   font-weight:300;
  }

input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(../../../images/check_radio_sheet.png) left top no-repeat;
cursor:pointer;
}

input[type="checkbox"]:checked + label span {
background:url(../../../images/check_radio_sheet.png) -19px top no-repeat;
}