2017-10-26 1 views
0

私は範囲を編集する方法を理解しようとしています。私は正常にオブジェクトを追加したり削除したりできます。この例では簡単なTodoアプリケーションを開発しています。anglejsでスコープを編集するには?

私は、これは

tutorialは、私はこのサイト上で同様の質問を参照し、以下ましたが、何

を探してイムどのようにスコープを編集するに似て何?

<!DOCTYPE html> 
<html ng-app="eli"> 
<head 
    <meta charset="UTF-8"> 
    <title>Untitled Bullcrap</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> 
    <script src="main.js"></script> 
</head> 
<body> 

<div ng-controller="mycontroller"> 

<ul> 
    <li ng-repeat ="x in products">{{x}} 
    <span ng-click="removeItem($index)">&times;</span> 
    <button ng-click="selectProduct(x)">Edit</button> 
    </li> 
</ul> 

<input ng-model="addMe"> 
<button ng-click="addItem()">Add</button> 

</div> 

</body> 
</html> 

ここはangularjsスクリプトです。

angular.module('eli', []) 
    .controller('mycontroller', function($scope){ 

// My code 
     $scope.products = ["Milk", "Bread", "Cheese"]; 
     $scope.newProduct = {}; 
     $scope.addItem = function(){ 
      $scope.products.push($scope.addMe); 
     } 

     $scope.saveProduct = function(x) 
     { 
      $scope.products.push($scope.newProduct); 
      $scope.newProduct = {}; 
     } 

     $scope.selectProduct = function(x){ 
      $scope.clickedProduct = x; 
     } 

     $scope.removeItem = function(x){ 
      $scope.products.splice(x,1); 
     } 


     $scope.editItem = function(x){ 
      $scope.editItem = true; 


     } 




    }); 
+1

あなたが "編集" スコープとはどういう意味ですか? –

+0

@TimBiegeleisenはこの例の製品を編集して更新します。 – BARNOWL

答えて

1

angular.module('eli', []) 
 
    .controller('mycontroller', function($scope){ 
 

 
// My code 
 
     $scope.products = ["Milk", "Bread", "Cheese"]; 
 
     $scope.newProduct = {}; 
 
     $scope.editIndex=-1 
 
     $scope.addItem = function(){ 
 
      $scope.products.push($scope.addMe); 
 
     } 
 

 
     $scope.saveProduct = function(x) 
 
     { 
 
      $scope.products.push($scope.newProduct); 
 
      $scope.newProduct = {}; 
 
     } 
 

 
     $scope.editProduct = function(x){ 
 
      $scope.editIndex = x; 
 
      $scope.addMe=$scope.products[x]; 
 
     } 
 

 
     $scope.updateItem=function(){ 
 
     \t $scope.products[$scope.editIndex]=$scope.addMe; 
 
     \t $scope.editIndex = -1; 
 
     \t $scope.addMe=""; 
 
     } 
 

 
     $scope.removeItem = function(x){ 
 
      $scope.products.splice(x,1); 
 
     } 
 
    });
<!DOCTYPE html> 
 
<html ng-app="eli"> 
 
<head 
 
    <meta charset="UTF-8"> 
 
    <title>Untitled Bullcrap</title> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div ng-controller="mycontroller"> 
 

 
<ul> 
 
    <li ng-repeat ="x in products">{{x}} 
 
    <span ng-click="removeItem($index)">&times;</span> 
 
    <button ng-click="editProduct($index)">Edit</button> 
 
    </li> 
 
</ul> 
 

 
<input ng-model="addMe"> 
 
<button ng-click="addItem()" ng-if="editIndex==-1">Add</button> 
 
<button ng-click="updateItem()" ng-if="editIndex>-1">Update</button> 
 

 
</div> 
 
</body> 
 
</html>

関連する問題