Question

刚刚开始使用棱角分明，不知道如何从控制器中更新模型，或者事实上如果能够准确地了解要做什么。我有一个基于ion.autocomplete的自动填充字段

HTML

  <span ng-controller="IonAutocompleteController">
  <label class="item item-input item-stacked-label">
            <span class="input-label">Item Description</span>
            <ion-autocomplete ng-model="model"
                              item-value-key="name"
                              item-view-value-key="view"
                              items-method="getTestItems(query)"  
                              multiple-select="false"
                              placeholder="Bread, Milk, Eggs etc .."
                              items-clicked-method="itemsClicked(callback)"/>
            </span>

    <button class="button button-block button-royal" ng-click="scan()">Scan</button>


 <div class="row">
 <div class="col"><b>Item Name</b></div>
 <div class="col" ng-model="name"></div>
 </div>

的Javascript

  var myApp = angular.module('myApp', ['ionic','ngCordova','ion-autocomplete']);

  myApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
  $ionicConfigProvider.tabs.position('bottom')
  }]);


   myApp.controller('IonAutocompleteController', function ($scope,$http) {
                $scope.model = "";
                $scope.callbackValueModel = "";
                $scope.getTestItems = function (query) {  
                console.log(query);
                return  $http.get('http://192.168.100.100/myApp/products/' + query).
                        success(function(data, status, headers, config) {
                        console.log(data);
                        }).error(function(data, status, headers, config) {
                        console.log("something went wrong")    
                        });
                };
                $scope.itemsClicked = function (callback) {
                console.log(callback);
                $scope.name=callback.item.name;
                console.log(callback);
                $scope.callbackValueModel = callback;
                }
            });

这里发生的事情是自动选择是从REST服务器获取数据，结果放在自动完成中。选择该项时，将在json数组中返回callback。我希望callback放在ng-model="name"中，但它不在控制器中。或者我认为这就是它没有更新的原因。

Answer 1

您的ng-Model="name"绑定到控制器中的$scope.name。从REST调用返回数据时，只需设置$scope.name = data。

Answer 2

您需要根据成功回调返回的内容使用自动填充数据填充视图，而不是将$ http作为调用返回。

        $http.get('http://192.168.100.100/myApp/products/' + query).
                success(function(data, status, headers, config) {
                    console.log(data);

                    // Do whatever you need to do to data before binding it, 
                    //such as extracting a value from the JSON, etc.
                    $scope.model = data;

                    }).error(function(data, status, headers, config) {
                        console.log("something went wrong")    
                    });
                };

Answer 3

这里有两个问题。

1 /缺少</label>。

2 /应使用ng-bind NOT ng-model作为输入

在控制器

3 个答案: