如何在uib-tabset中使用ng-checked

Question

With the example of ng-checked as documented at:-

https://docs.angularjs.org/api/ng/directive/ngChecked

If you place the first checkbox of 'check me to check both', the checkbox is not checked if it is placed inside a uib-tabset-heading after you have selected it.

Can anyone explain why this is the case and what you can do to persist the checked state.

Answer 1

It is a scoping issue. The uib-tabset directive creates a child scope for the tabs. For prototypical inheritance to work properly the ng-model directive needs to specify a property of an object.

  <input ng-init='obj={}' id="checkSlave" type="checkbox" ng-checked="obj.master">
  <br>        
  <uib-tabset active="active">
    <uib-tab index="0" heading="Static title">
          <label>Check me to check both: 
                               <!-- Always include a dot in ng-model-->
          <input type="checkbox" ng-model="obj.master"></label><br/>

    </uib-tab>

The DEMO on PLNKR

For more information, see The Nuances of Scope Prototypal Inheritance