I have three angular-ui-bootstrap typehead in a form

<form>
<div class="form-group">
   <label for="fieldname" class="col-md-3 control-label">Name</label>
   <div class="col-md-6">
      <input type="text" ng-model="newItem.customSelected" typeahead="name as name.name for name in members | filter:{name:$viewValue}" class="form-control" />
   </div>
</div>
<div class="form-group">
   <label for="fieldhname" class="col-md-3 control-label">House name</label>
   <div class="col-md-6">
      <input type="text" ng-model="newItem.customSelected1" typeahead="house_name as house_name.house_name for house_name in family | filter:{house_name:$viewValue}" class="form-control" />

   </div>
</div>
<div class="form-group">
   <label for="" class="col-md-3 control-label"><?php echo $this->lang->line('label_family_id'); ?></label>
   <div class="col-md-6">
      <input type="text" ng-model="newItem.customSelected2" typeahead="fm as fm.family_reg_no for fm in family | filter:{family_reg_no:$viewValue}" class="form-control" />
   </div>
</div>
<div class="col-md-3"></div>
<input type="button" class="finish btn-success btn" ng-click="search(newItem)" value="Search"/>
</form>

the search button calls the function,

$scope.search = function(item) {
    item['id']=item.customSelected.id;
    item['family_id']=item.customSelected1.id;
    item['family_id']=item.customSelected2.id;
     delete data.customSelected;




     FamilyMemSearch.get(item, function (response) { // success

            $scope.tableData = response.data; // store result to variable

            }, function (error) { // ajax loading error
                Data.errorMsg(); // display error notification
            });

      };

but it shows an error customSelected1,customSelected2 is undefined.

I have three angular-ui-bootstrap typehead in a form

<form>
<div class="form-group">
   <label for="fieldname" class="col-md-3 control-label">Name</label>
   <div class="col-md-6">
      <input type="text" ng-model="newItem.customSelected" typeahead="name as name.name for name in members | filter:{name:$viewValue}" class="form-control" />
   </div>
</div>
<div class="form-group">
   <label for="fieldhname" class="col-md-3 control-label">House name</label>
   <div class="col-md-6">
      <input type="text" ng-model="newItem.customSelected1" typeahead="house_name as house_name.house_name for house_name in family | filter:{house_name:$viewValue}" class="form-control" />

   </div>
</div>
<div class="form-group">
   <label for="" class="col-md-3 control-label"><?php echo $this->lang->line('label_family_id'); ?></label>
   <div class="col-md-6">
      <input type="text" ng-model="newItem.customSelected2" typeahead="fm as fm.family_reg_no for fm in family | filter:{family_reg_no:$viewValue}" class="form-control" />
   </div>
</div>
<div class="col-md-3"></div>
<input type="button" class="finish btn-success btn" ng-click="search(newItem)" value="Search"/>
</form>

the search button calls the function,

$scope.search = function(item) {
    item['id']=item.customSelected.id;
    item['family_id']=item.customSelected1.id;
    item['family_id']=item.customSelected2.id;
     delete data.customSelected;




     FamilyMemSearch.get(item, function (response) { // success

            $scope.tableData = response.data; // store result to variable

            }, function (error) { // ajax loading error
                Data.errorMsg(); // display error notification
            });

      };

but it shows an error customSelected1,customSelected2 is undefined.

• javascript
• angularjs
• twitter-bootstrap
• angular-ui
• angular-ui-bootstrap

• 3 Can you share a jsFiddle or plunk to demonstrate the problem? – Abhishek Jain Commented Jan 29, 2014 at 12:49
• Perhaps because they do not have the properties of "id"? – Goodnickoff Commented Jan 29, 2014 at 12:57
• i gave id.but again it shows error – Nisham Mahsin Commented Jan 29, 2014 at 13:12

1 Answer 1

ngModel automatically creates properties only after the value changes first time. If you don't initialize the item.customSelected1, item.customSelected2 and click search right after page loads, the values will be undefined.

Try initializing your item.customSelected1 and item.customSelected2

app.controller("yourController",function($scope){
    $scope.newItem= {};
    $scope.newItem.customSelected1 = {};
    $scope.newItem.customSelected2 = {};
});