2014-09-12 125 views
0

在我的離子模態瀏覽頁面上,我有一個select2元素,需要彈出已在我的控制器中可用的患者列表,當我點擊select2時,我看到患者列表(項目)但無法從該項目中選擇一個。離子,javascript和角度

這裏是我的html代碼containig模態

<ion-view> 
<header class="bar bar-header bar-positive"> 
    <h1 class="title">New Prescription</h1> 
    <button class="button button-positive">Save</button> 
    <div class="button button-clear" ng-click="modal.hide()"> 
     <span class="icon ion-close"></span> 
    </div> 
</header> 
<ion-content padding="true" class="has-header"> 
    <div id="formdiv"> 
     <div class="form-group"> 
      <form> 
       <div class="list"> 
        <div> 

        </div> 
      <select name="pid" 
       ui-select2="{openOnEnter: true,width: '100%',allowClear: true,placeholder: '--- Search using Name, Emr id or Phone Number---'}" 
       ng-model="selectedPatient" ng-change="patientChange(selectedPatient, $index)"> 
       <option></option> 
       <option ng-repeat="patient in patientItems" value="{{patient}}">{{patient.fullname}} </option> 
       </select> 

        <!--<input type="hidden" id="pid" name="pid">--> 

        <label class="item item-input"> 

         <input type="hidden" id="generic"> 
        </label> 

        <label class="item item-input"> 
         <input type="hidden" id="drug" name="drug"> 
        </label> 
        <label class="item item-input"> 
         <span class="input-label">Frequency</span> 
         <input type="text" placeholder="e.g: 2 x daily"> 
        </label> 
        <label class="item item-input"> 
         <span class="input-label">Duration</span> 
         <input type="number" placeholder="e.g: 7"> 
        </label> 

        <div class="item item-checkbox"> 
         <label class="checkbox"> <input type="checkbox"> </label> 
         Refillable 
        </div> 
       </div> 

       <div class="list list-inset"> 
        <button class="button-icon button-calm ion-android-add">add</button> 
        <label class="item item-input item-stacked-label">Add Note 
         <textarea placeholder="Add Prescription Note"></textarea> 
        </label></div> 

      </form> 

     </div> 
    </div> 
</ion-content> 

這裏是我的控制器

.controller('MainCtrl', function ($scope, $state, $ionicModal, DataStore, $http) { 
    if (!angular.isDefined(localStorage.staffID)) { 
     $state.go('login'); 
    } 
    //todo: Controller for all global information 
    // $ionicModal.controller('NewCtrl') 

    $ionicModal.fromTemplateUrl('templates/new.html', function ($ionicModal) { 
     $scope.modal = $ionicModal; 

    }, { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }); 

    $scope.newPrescription = function() { 
     //todo: loads up the registration form 
     $scope.modal.show(); 
     var url = DataStore.domain; 

        $http.get(url + '/api/search_patients.php?limit=100&asArray=true&medical=true&q=i').success(function (data) { 
         $scope.patientItems = data; 

        }); 

     //todo: Do Search for Registered patient 

    }; 


}) 
+1

您使用ng-repeat代替ng-options填充選擇下拉列表的任何特定原因? – 2014-09-12 11:26:24

+0

特別的目的,這是我知道的方法 – 2014-09-12 13:52:16

+0

好的。我想這應該不重要。但控制器中的$ scope.patientChange()函數在哪裏? – 2014-09-12 14:52:53

回答

0

您必須NG-模型中有效的患者。

例如在您的控制器中將selectedPatient設置爲有效患者之一。

$http.get(url + '/api/search_patients.php?limit=100&asArray=true&medical=true&q=i').success(function (data) { 
    $scope.patientItems = data; 
    $scope.selectedPatient = data[0]; // set it to the valid patient 
});