刚刚开始使用棱角分明,不知道如何从控制器中更新模型,或者事实上如果能够准确地了解要做什么。我有一个基于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"
中,但它不在控制器中。或者我认为这就是它没有更新的原因。
答案 0 :(得分:0)
您的ng-Model="name"
绑定到控制器中的$scope.name
。从REST调用返回数据时,只需设置$scope.name = data
。
答案 1 :(得分:0)
您需要根据成功回调返回的内容使用自动填充数据填充视图,而不是将$ 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")
});
};
答案 2 :(得分:0)
这里有两个问题。
1 /缺少</label>
。
2 /应使用ng-bind
NOT ng-model
作为输入