Angular 1.x checkbox implementation (new, edit)

Source: Internet
Author: User
First look at the effect::

The following are some of the issues addressed:
1. How to submit the selected values after the new page is selected
2. When editing the page, you can see the selected

Implementation ideas:

New when the value of these check boxes is back in the background, the data structure is as follows

In the new controller, the above interface gets the value assignment

Vm.data.font_ids = Res.data.list
Viewing the view plane
<div class= "Form-group" >
    <label class= "col-sm-3 control-label" > Font:</label>
    <div class = "checkbox checkbox-info col-sm-6" ng-repeat= "item in Vm.data.font_ids track by $index" >
        <input id={{item.id} } type= "checkbox" ng-model= "Item.is_select" ng-true-value= "1" ng-false-value= "0" >
        <label class= " Text-center "for={{item.id}}>{{item.font_name}}</label>
     </div>
   </div>
</div >
Explain:
The value of the ng-repeat is the value taken from the control level, and then the loop assigns the check box to the selection or not, angular has a built-in instruction Ng-true-value/ng-true-false here Item.is_select Is the front desk to add a field to determine whether the selected state, in the new time do not need this is_select this field, only need to edit the time

To be continued .....

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.