Question

我是Ionic的新手，我正在尝试动态添加项目列表。我有一个本地json文件。我的默认dash.html中有一个按钮。当我单击按钮时，它将读取条形码并检查条形码是否是本地json文件中可用的数字。数据将通过app.js发送到下一页，如下面的代码。

Controller.js

    $scope.scanBarcode = function() {
    $cordovaBarcodeScanner.scan().then(function(imageData) {
        // alert(imageData.text);  
        if(imageData.text.length!=0){
        console.log("Barcode Format -> " + imageData.format);
        console.log("Cancelled -> " + imageData.cancelled);
        var alertPopup = $ionicPopup.alert({title: imageData.text});
        alertPopup.then(function(res) {
         $state.go('tablelist',{title: imageData.text}); 
        });
      }else{
        alert("Not captured properly.try again");
      }

    }, 
    function(error) {
        console.log("An error happened -> " + error);
    });
};

app.js

 .state('tablelist', {
  url: '/tablelist/:title',
  views: {
    'menuContent': {
      templateUrl: 'templates/tablelist.html',
      controller: 'TableCtrl'
    }
  }
})

所以我将在$ stateparams中获取数据，我可以在下一页进行比较和添加。

 .controller('TableCtrl', function($scope,$ionicPopup, $cordovaBarcodeScanner, $http, $stateParams) {
   $scope.users = []; //declare an empty array
   $scope.barData;
   $http.get("data/menulist.json").success(function(response){ 
   // alert($stateParams.title);  
   // if($stateParams.title==response.barcode){
    $scope.barData=$stateParams;  

    for(var i=0;i<response.length;i++){
      if($scope.barData.title==response[i].barcode){
        $scope.users.push(response[i]);
      }
    }
  });   

  $scope.scanBarcode = function() {
    $cordovaBarcodeScanner.scan().then(function(imageData) {
        if(imageData.text.length!=0){
        $http.get("data/menulist.json").success(function(response){ 
    for(var i=0;i<response.length;i++){
      if(imageData.text==response[i].barcode){
        $scope.users.push(response[i]);
        $scope.apply();
      }
    }
}); 
      }else{
        alert("Not captured properly.try again");
      }
    }, 
    function(error) {
        console.log("An error happened -> " + error);
    });
 };


  $scope.removeRow = function(user){
      $scope.users.splice( $scope.users.indexOf(user), 1 );
   };
 })

在第二页中，我再次有一个阅读条形码的按钮，我想将它添加到同一个列表中。这里没有使用sqlite。

这是我的tablelist.html

 <ion-content>
 <button class="button button-block button-positive" ng-click="scanBarcode()">Add Prduct</button>
 <ion-list>
 <div class="bs-component" ng-controller="TableCtrl">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Qty</th>
                                <th>Product</th>
                                <th>Image</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                        <div ng-app>
                            <tr ng-repeat="user in users">
                            <td>
  <select type="number" ng-model="quantity">
  <option selected="selected">1</option>
  <option>2</option>
  <option>3</option>
  </select><br/>
  </td>
                                <td>{{user.first_name}}</td>
                                <td><img class="td-img"  src="{{user.image}}"/></td>
                                <td>Rs: {{user.price*quantity}}
                                <input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(user)"/>
                                </td>
                            </tr>
                </div>
                        </tbody>
                    </table> 
                </div>

    </ion-list>
  </ion-content>

我可以看到数据正在添加到列表中，并且当我在循环内部或外部给$ scope.apply（）时它不会更新。

任何人都可以帮我解决这个问题吗？很多人提到$ scope.apply（）会起作用。但它没有帮助。提前谢谢。

Answer 1

将数量与价格相乘：

<div>
    <tr ng-repeat="user in users">
        <td>
           <select type="number" ng-model="user.quantity">//Changed quantity to user level scope.
           <option selected="selected">1</option>
           <option>2</option>
           <option>3</option>
           </select><br/>
       </td>
       <td>{{user.first_name}}</td>
       <td><img class="td-img"  src="{{user.image}}"/></td>
       <td ng-if="user.quantity">Rs: {{user.price*user.quantity}}//checking if quantity has been selected
       <input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(user)"/>
       </td>
    </tr>
</div>

这应该这样做。 ng-app是Angular的bootstrapping指令，应该严格用于引导应用程序。

离子：在控制器中增加数据后，视图列表不会更新

1 个答案: