AngularJs数据绑定不适用于离子 [英] AngularJs data binding not working with ionic

问题描述

我觉得我错过了一些显而易见的东西，其中包含一些离子输入文本。
我使用 angular-ui-router 使用此路线：

I feel like I am missing something obvious with some input text in ionic. I am using angular-ui-router with this route:

 $stateProvider.state('findPersons', {
   url : '/findPersons',
   templateUrl : 'html/findPersons.html',
   controller : 'findPersonsCtrl'
 });

这是中的文本输入代码findPersons.html ：

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="search" placeholder="Key Word" ng-model="keyWord">
  </label>
  <button ng-click="findPersons()" class="button button-bar-inline">Load</button>
</div>

然后我使用关键字来申请以这种方式使用API​​：

Then I use the keyword to request a rest API this way:

bockmoiApp.controller("findPersonsCtrl", function($scope, $http) {
  $scope.results= null;
  $scope.numberOfResults=-1;
  $scope.keyWord="";

  $scope.findPersons = function() {

    $http({
      method : 'GET',
      url : 'http://localhost:8080/bockmoi/rest/findPersons?keyWord='
          +$scope.keyWord+'&page=0&size=2'
    })
    .then(function successCallback(response) {
      $scope.results = response.data;
      $scope.numberOfResults=$scope.results.numberOfElements;
    },function errorCallback(response) {

    });
  }
});  

我想知道为什么当我点击加载按钮，在发送请求之前，keyWord值总是被替换，这会导致获取所有第一个大小结果在远程数据库中！毫无疑问，这段代码正在处理一个没有离子的原生html，css和angularjs代码。

And I am wondering why when I hit the load button, the keyWord value is always replaced by "" before the request is sent, which causes the fetching of all the first size results in the remote database! Nevetheless, this code is working on a native html,css and angularjs code without ionic.

有人可以告诉我我做错了吗？

Can somebody tell me what I am doing wrong?

推荐答案

您需要使用点符号。由于继承，简单值不会进行双向绑定。

You need to be using "dot notation". Because of inheritance, simple values will not do two way binding.

请使用以下代码进行与离子的双向数据绑定

Please use the following code for two way data binding with ionic

在控制器中

$scope.test={keyWord : ""};

在视图中

<div class="bar bar-header item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Key Word" ng-model="test.keyWord">
    </label>
    <button ng-click="findPersons()" class="button button-bar-inline">Load</button>
</div>

实例是这里&同样的问题是这里。

Live Example are here & same issue are here.

从此处了解更多详情。

希望这有帮助！

这篇关于AngularJs数据绑定不适用于离子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！