Question

我有一个使用角度和离子框架的数据绑定问题。所以我试图让用户从模态中选择联系人，这应该绑定/填充页面上的表单域。这似乎是一个基本的角度问题，因为我是Angular绑定的新手，不知道它是如何工作的。在这种情况下，范围如何使用模态？如果我在创建它时将控制器$ scope传递给模态，它是否可以使用角度指令（如模态本身的html中的ng-model）访问相同的范围和模型对象？

我最初尝试将复选框上的ng-model设置为表单字段的同一ng模型，以为它可能只是将任何更改绑定到表单但不起作用。

<ion-view title="Create">
  <ion-content class="has-header">
    <form name="inviteForm" ng-submit="createInvite(invite)">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Who</span>
          <input type="text" placeholder="Who" ng-model="invite.who" readonly ng-click="openContactPicker()">
        </label>
      </div>
      <div class="padding">
        <button type="submit" class="button button-block button-positive">Create Invite</button>
      </div>
    </form>
  </ion-content>
</ion-view>


<script id="pick-contacts.html" type="text/ng-template">
  <div class="modal">
    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">Pick Contacts</h1>
      <button class="button button-clear button-positive" ng-click="closeContactPicker()">Done</button>
    </ion-header-bar>

    <!-- Modal content area -->
    <ion-content>
        <ul class="list">

          <li ng-repeat="contact in contacts" class="item item-checkbox">
             <label class="checkbox">
               <input type="checkbox" value='{{contact}}' ng-model="invite.who">
             </label>
            {{contact.displayName}}
          </li>
        </ul>
    </ion-content>
  </div>
</script>

控制器代码

  // Create and load the Modal
  $ionicModal.fromTemplateUrl('pick-contacts.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.pickerModal = modal;
  });

  $scope.openContactPicker = function() {

    // $scope.contacts = {};
    $scope.pickerModal.show();

    //this below throws invite undefined error
    console.log(invite);
    if ($scope.contacts.length == 0 && navigator && navigator.contacts)
    {
      var options = new ContactFindOptions();
      options.multiple = true;
      var fields = ["displayName", "emails", "phoneNumbers"]; //name or displayName
      navigator.contacts.find(fields, function(contacts){
        $scope.contacts = contacts;
      }, function(){
        console.log('error');
      }, options);
    }


  };



// Called when the form is submitted
  $scope.createInvite = function(invite) {
    $scope.invites.unshift({
      who: invite.who
    });

    $scope.inviteModal.hide();
    $scope.invite = {};
    $ionicNavBarDelegate.back();

  };

Answer 1

您可以在复选框上添加索引以区分复选框

<input type="checkbox" value='{{contact}}' ng-model="invite.who[$index]">

然后$index值可用于映射回联系人数组中的联系人。

Answer 2

我认为您的绑定存在问题，因为代码全部在控制器中。

但是，你有一个ng-repeat中的复选框。绑定它的方式意味着您的所有复选框现在都接收相同的ng模型。现在有办法确定邀请哪个联系人，哪个联系人没有。

每个复选框都应该有自己的模式，或者您可以添加点击事件并维护所有点击的联系人列表。

如何绑定模式中的复选框以填充角度中的表单域

2 个答案: