2017-02-05 13 views
0

私は2つの異なるdivを使用したいと思います。これらの2つの部門は、同じコントローラを使用する必要があります。しかし、私はdiv間で希望の方法でデータを共有することはできません。私は工場を使用していますが、スコープにデータを追加するだけで役立ちます。私はまた、同じコントローラの別のインスタンスを持つフォーム内のスコープ値を編集したい。 私が行ったことはthis linkにあります。あなたは二回、コントローラを初期化した

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<body> 

<script> 
var app = angular.module("myShoppingList", []); 
app.factory('fact',function(){ 
    products = ["milk","chese"]; 
    tempItem = ''; 
    tempIndex = undefined; 
    return { 
     getProducts : function() { 
      return products; 
     }, 
     getProductByIndex : function(x){ 
      return products[x]; 
     }, 
     saveProduct : function(x,item) 
     { 
      if(x==undefined) 
      { 
       products.push(item); 
      } 
      else 
      { 
       products[x] = item; 
      } 
      tempItem = ''; 
      tempIndex = undefined; 
     }, 
     editProduct : function(x) 
     { 
      tempItem = products[x]; 
      tempIndex = x; 
     }, 
     removeProduct : function(x) 
     { 
      products.splice(x, 1); 
     }, 
     getTempItem : function() 
     { 
      return tempItem; 
     }, 
     getTempIndex : function() 
     { 
      return tempIndex; 
     }, 
    } 
}); 
app.controller("myCtrl", function($scope, fact) { 
    $scope.products = fact.getProducts(); 
    $scope.tempIndex = fact.getTempIndex(); 
    $scope.tempItem = fact.getTempItem(); 
    $scope.saveItem = function() { 
     fact.saveProduct($scope.tempIndex,$scope.tempItem); 
    } 
    $scope.editItem = function (x) { 
     fact.editProduct(x); 
    } 
    $scope.removeItem = function (x) { 
     fact.removeProduct(x); 
    } 
}); 

</script> 

<div ng-app="myShoppingList" ng-cloak class="w3-card-2 w3-margin" style="max-width:400px;"> 
    <header class="w3-container w3-light-grey w3-padding-16"> 
    <h3>My Shopping List</h3> 
    </header> 
    <div ng-controller="myCtrl"> 
    <ul class="w3-ul"> 
    <li ng-repeat="x in products" class="w3-padding-16">{{$index}} {{x}} 
    <span ng-click="editItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">||</span> 
    <span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span> 
    </ul> 
    </div> 
    <div ng-controller="myCtrl" class="w3-container w3-light-grey w3-padding-16"> 
    <form ng-submit="saveItem()"> 
    <div class="w3-row w3-margin-top"> 
     <div class="w3-col s10"> 
     <input placeholder="Add shopping items here" ng-model="tempItem" class="w3-input w3-border w3-padding"> 
     <input type="hidden" ng-model="tempIndex"> 
     </div> 
     <div class="w3-col s2"> 
     <button type="submit" class="w3-btn w3-padding w3-green">Save</button> 
     </div> 
    </div> 
    </form> 
    </div> 
</div> 

</body> 
</html> 

答えて

0

の問題

  • コントローラ内部で編集することができます。
  • $スコープ値を保存した後は、工場で値をクリアするとともにクリアする必要があります。

CONTROLLERとHTML

var app = angular.module("myShoppingList", []); 
 
app.factory('fact',function(){ 
 
\t products = ["milk","chese"]; 
 
    tempItem = ''; 
 
    tempIndex = undefined; 
 
    return { 
 
    \t getProducts : function() { 
 
     \t return products; 
 
     }, 
 
     getProductByIndex : function(x){ 
 
     \t return products[x]; 
 
     }, 
 
     saveProduct : function(x,item) 
 
     { 
 
      if(!x) 
 
      { 
 
\t \t \t \t products.push(item); 
 
      } 
 
      else 
 
      { 
 
\t \t \t \t products[x] = item; 
 
      } 
 
      tempItem = ''; 
 
     \t tempIndex = ''; 
 
     }, 
 
     editProduct : function(x) 
 
     { 
 
      \t tempItem = products[x]; 
 
      tempIndex = x; 
 
     }, 
 
     removeProduct : function(x) 
 
     { 
 
      \t products.splice(x, 1); 
 
     }, 
 
     getTempItem : function() 
 
     { 
 
     \t return tempItem; 
 
     }, 
 
     getTempIndex : function() 
 
     { 
 
     \t return tempIndex; 
 
     }, 
 
    } 
 
}); 
 
app.controller("myCtrl", function($scope, fact) { 
 
    $scope.products = fact.getProducts(); 
 
    $scope.tempIndex = fact.getTempIndex(); 
 
    $scope.tempItem = fact.getTempItem(); 
 
    $scope.saveItem = function() { 
 
\t \t fact.saveProduct($scope.tempIndex,$scope.tempItem); 
 
     $scope.tempItem = ''; 
 
     $scope.tempIndex = ''; 
 
    } 
 
    $scope.editItem = function (x) { 
 
    \t $scope.tempItem = fact.getProducts()[x]; 
 
     $scope.tempIndex = x; 
 
    } 
 
    $scope.removeItem = function (x) { 
 
     fact.getProducts().splice(x, 1); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<div ng-app="myShoppingList" ng-controller="myCtrl" ng-cloak class="w3-card-2 w3-margin" style="max-width:400px;"> 
 
    <header class="w3-container w3-light-grey w3-padding-16"> 
 
    <h3>My Shopping List</h3> 
 
    </header> 
 
    <div> 
 
    <ul class="w3-ul"> 
 
    <li ng-repeat="x in products" class="w3-padding-16">{{$index}} {{x}} 
 
    <span ng-click="editItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">||</span> 
 
    <span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span> 
 
    </ul> 
 
    </div> 
 
    <div class="w3-container w3-light-grey w3-padding-16"> 
 
    <form ng-submit="saveItem()"> 
 
    <div class="w3-row w3-margin-top"> 
 
     <div class="w3-col s10"> 
 
     <input placeholder="Add shopping items here" ng-model="tempItem" class="w3-input w3-border w3-padding"> 
 
     <input type="hidden" ng-model="tempIndex"> 
 
     </div> 
 
     <div class="w3-col s2"> 
 
     <button type="submit" class="w3-btn w3-padding w3-green">Save</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
    </div> 
 
</div>

関連する問題