ngRepeat सरणियों के बीच

तो मैं AngularJS के लिए नया हूँ और मैं एक बहुत ही सरल सूची अनुप्रयोग, जहां मैं एक एनजी-दोहराने आइटम सूची बना सकते हैं का निर्माण करने के लिए और फिर दूसरे में एक चयनित आइटम धक्का कोशिश कर रहा हूँ AngularJS में वस्तुओं पुश करने के लिए कैसे एनजी-दोहराना सूची। हालांकि मेरी समस्या बहुत सरल प्रतीत होती है, लेकिन मैं अभी तक एक उचित समाधान नहीं ढूंढ पा रहा था।ngRepeat सरणियों के बीच

तो यहाँ सरल मार्कअप है:

<body ng-app="MyApp"> 
<div id="MyApp" ng-controller="mainController"> 

    <div id="AddItem"> 
     <h3>Add Item</h3> 

     <input value="1" type="number" placeholder="1" ng-model="itemAmount"> 
     <input value="" type="text" placeholder="Name of Item" ng-model="itemName"> 
     <br/> 
     <button ng-click="addItem()">Add to list</button> 
    </div> 
    <!-- begin: LIST OF CHECKED ITEMS --> 
    <div id="CheckedList"> 
     <h3>Checked Items: {{getTotalCheckedItems()}}</h3> 

     <h4>Checked:</h4> 

     <table> 
      <tr ng-repeat="item in checked" class="item-checked"> 
       <td><b>amount:</b> {{item.amount}} -</td> 
       <td><b>name:</b> {{item.name}} -</td> 
       <td> 
        <i>this item is checked!</i> 

       </td> 
      </tr> 
     </table> 
    </div> 
    <!-- end: LIST OF CHECKED ITEMS --> 
    <!-- begin: LIST OF UNCHECKED ITEMS --> 
    <div id="UncheckedList"> 
     <h3>Unchecked Items: {{getTotalItems()}}</h3> 

     <h4>Unchecked:</h4> 

     <table> 
      <tr ng-repeat="item in items" class="item-unchecked"> 
       <td><b>amount:</b> {{item.amount}} -</td> 
       <td><b>name:</b> {{item.name}} -</td> 
       <td> 
        <button ng-click="toggleChecked($index)">check item</button> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <!-- end: LIST OF ITEMS --> 
    </div> 
</body>

और यहाँ चला जाता है मेरी AngularJS स्क्रिप्ट:

var app = angular.module("MyApp", []); 

app.controller("mainController", 

function ($scope) { 

// Item List Arrays 
$scope.items = []; 
$scope.checked = []; 

// Add a Item to the list 
$scope.addItem = function() { 

    $scope.items.push({ 
     amount: $scope.itemAmount, 
     name: $scope.itemName 
    }); 

    // Clear input fields after push 
    $scope.itemAmount = ""; 
    $scope.itemName = ""; 

}; 

// Add Item to Checked List and delete from Unchecked List 
$scope.toggleChecked = function (item, index) { 
    $scope.checked.push(item); 
    $scope.items.splice(index, 1); 
}; 

// Get Total Items 
$scope.getTotalItems = function() { 
    return $scope.items.length; 
}; 

// Get Total Checked Items 
$scope.getTotalCheckedItems = function() { 
    return $scope.checked.length; 
}; 
});

तो जब मैं बटन पर क्लिक करें, मेरे toggleChecked() फ़ंक्शन चलाता है और यह वास्तव में मेरी चेक की गई सूची में कुछ धक्का देता है। हालांकि, यह सिर्फ एक खाली वस्तु प्रतीत होता है। फ़ंक्शन को वास्तविक आइटम नहीं मिल सकता है जिसे मैं धक्का देना चाहता हूं।

क्या मैं गलत यहाँ कर रहा हूँ?

नोट: एक बटन पर क्लिक के माध्यम से जांच की जा रही वस्तुओं का इरादा है। मैं इस मामले में चेकबॉक्स का उपयोग नहीं करना चाहता हूं।

आप यहाँ काम कर मॉडल देख सकते हैं: http://jsfiddle.net/7n8NR/1/

चीयर्स, नॉर्मन

स्रोत

2013-06-13 VoodooDS

परिवर्तन करने के लिए अपने विधि:

$scope.toggleChecked = function (index) { 
    $scope.checked.push($scope.items[index]); 
    $scope.items.splice(index, 1); 
};

Working Demo

स्रोत

2013-06-13 22:44:41 WooCaSh

तुम बहुत बेहतर होगा दोनों सूचियों के साथ एक ही सरणी का उपयोग करके, और एंगुल बनाने के लिए बंद करें अपने लक्ष्य को प्राप्त करने के लिए आर फिल्टर।

http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

रफ, अपरीक्षित कोड इस प्रकार है:

appModule.filter('checked', function() { 
    return function(input, checked) { 
     if(!input)return input; 
     var output = [] 
     for (i in input){ 
      var item = input[i]; 
      if(item.checked == checked)output.push(item); 
     } 
     return output 
    } 
});

और दृश्य (मैं एक "सही का निशान हटाएँ" बटन भी जोड़ा)

<div id="AddItem"> 
    <h3>Add Item</h3> 

    <input value="1" type="number" placeholder="1" ng-model="itemAmount"> 
    <input value="" type="text" placeholder="Name of Item" ng-model="itemName"> 
    <br/> 
    <button ng-click="addItem()">Add to list</button> 
</div> 
<!-- begin: LIST OF CHECKED ITEMS --> 
<div id="CheckedList"> 
    <h3>Checked Items: {{getTotalCheckedItems()}}</h3> 

    <h4>Checked:</h4> 

    <table> 
     <tr ng-repeat="item in items | checked:true" class="item-checked"> 
      <td><b>amount:</b> {{item.amount}} -</td> 
      <td><b>name:</b> {{item.name}} -</td> 
      <td> 
       <i>this item is checked!</i> 
       <button ng-click="item.checked = false">uncheck item</button> 

      </td> 
     </tr> 
    </table> 
</div> 
<!-- end: LIST OF CHECKED ITEMS --> 
<!-- begin: LIST OF UNCHECKED ITEMS --> 
<div id="UncheckedList"> 
    <h3>Unchecked Items: {{getTotalItems()}}</h3> 

    <h4>Unchecked:</h4> 

    <table> 
     <tr ng-repeat="item in items | checked:false" class="item-unchecked"> 
      <td><b>amount:</b> {{item.amount}} -</td> 
      <td><b>name:</b> {{item.name}} -</td> 
      <td> 
       <button ng-click="item.checked = true">check item</button> 
      </td> 
     </tr> 
    </table> 
</div> 
<!-- end: LIST OF ITEMS -->

तो फिर आप अपने नियंत्रक

स्रोत

2013-06-14 05:33:50 ricick

मैं कुछ इसी तरह के बारे में पहली बार में सोचा है, लेकिन मुझे लगता है कि डर मेरा नियंत्रक बहुत गन्दा हो जाएगा क्योंकि परियोजना अधिक जटिल हो जाती है। उदाहरण के लिए, यदि मैं "चेक" और "अनचेक" के अलावा एक और राज्य जोड़ता हूं और अन्य विचारों के साथ विभिन्न राज्यों के साथ वस्तुओं का पुन: उपयोग करता हूं, तो चीजें अधिक कठिन हो जाती हैं। कई नियंत्रकों में सॉर्ट किए गए मेरे आइटम को रखने से शायद मेरा कोड अधिक साफ रहेगा और मैं बाद में परियोजना में अधिक लचीला हूं। – VoodooDS

-6

इस एक भी प्रयास करें में टॉगल तरीकों आदि की आवश्यकता नहीं है ...

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
    <p>Click the button to join two arrays.</p> 
 

 
    <button onclick="myFunction()">Try it</button> 
 

 
    <p id="demo"></p> 
 
    <p id="demo1"></p> 
 
    <script> 
 
    function myFunction() { 
 
     var hege = [{ 
 
     1: "Cecilie", 
 
     2: "Lone" 
 
     }]; 
 
     var stale = [{ 
 
     1: "Emil", 
 
     2: "Tobias" 
 
     }]; 
 
     var hege = hege.concat(stale); 
 
     document.getElementById("demo1").innerHTML = hege; 
 
     document.getElementById("demo").innerHTML = stale; 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

स्रोत

2015-06-17 13:54:35

AngularJS के साथ डोम में जावास्क्रिप्ट से बचें। –

ngRepeat सरणियों के बीच

उत्तर

संबंधित मुद्दे