如何使用angularjs

我想上多次點擊按鈕加起來場加時，按鈕被點擊多次新的領域，他們r嵌套對方.. what i am trying to do as shown in the picture 如何使用angularjs

的html代碼：

<body ng-controller="myController"> 
<form name="{{form.name}}" ng-repeat="form in forms"> 
<div ng-repeat="cont in form.contacts"> 
     <select> 
     <option>--select machine--</option> 
     <option>data1</option> 
     <option>data2</option> 
     </select> 
     <div class="data">   
     <button class="add_s" ng-click = "add()">Add more</button> 
     </div> 
     </div> 
     <button ng-click="addFields(form)">Add</button> 
     </body>

angularjs代碼：

var app = angular.module('myApp', []); 
app.controller('myController', function($scope) { 
$scope.forms = [{ }]; 
$scope.addFields = function (form) { 
if(typeof form.contacts === 'undefined') { 
form.contacts = []; 
} 
form.contacts.push(''); 
} 
$scope.add = function(){ 
     var max_fields  = 10; //maximum input boxes allowed 
     var wrapper   = $(".data"); //Fields wrapper 
     var add_button  = $(".add_s"); //Add button ID 
     var y=1; 
     var x = 1;//initlal text box count 
     $(add_button).click(function(e){ //on add input button click 
      e.preventDefault(); 
      if(x < max_fields){ //max input box allowed 
       x++; //text box increment 
       $(wrapper).prepend('<div><select><option>--select--</option><option>data1.1</option><option>data1.2</option></select><input type="text"><input type="text"><input type="text"><input type="text"><a href="#" class="remove_field"><i class="glyphicon glyphicon-trash"></i></a></div>'); 

      } 
     }); 

     $(wrapper).on("click",".remove_field", function(e){ //user click on remove text                                      
      e.preventDefault(); $(this).parent('div').remove(); x--; 
     }) 

} 
});

錯誤：如果我上添加按鈕，即時得到只有一次以上div標籤的重複點擊，但我想，那麼r重複多次，，當我點擊添加更多的按鈕數據與第二個div標籤應重複。但它的發生.. :(..

請幫助..感謝ü提前。

來源

2016-02-05 suma

你在想jQuery，那不是angularJS的工作方式。看看這個瞭解更多。 http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – Klante

不要混用Jquery和AngularJs。 AngularJS足夠強大，可以處理您使用Jquery創建的點擊事件。 –

如上所述，除非真正需要，否則不應該將jQuery與AngularJS一起使用，因爲它們有不同的方法。老實說，它看起來不像你的情況那麼需要。順便說一句，解決它的一種方法是將數據綁定到一個數組中，並使用Add按鈕將新元素添加到數組中。你可以用'ng-repeats'顯示現有元素 –

使用此代碼。這裏是plunker。

$scope.forms = []; 
$scope.addForms = function() { 
    $scope.forms.push({contacts : []}); 
}; 
$scope.addContact = function (form) { 
    form.contacts.push({}); 
};

查看

<form name="{{form.name}}" ng-repeat="form in forms" style="border:1px solid red"> 
     New Form 
     <div ng-repeat="cont in form.contacts"> 
      <select> 
       <option>--select machine--</option> 
       <option>data1</option> 
       <option>data2</option> 
      </select> 
     </div> 
     <div class="data"> <!-- Move this out of contacts -->  
      <button class="add_s" ng-click = "addContact(form)">Add more</button> 
      </div> 
     </form><!--You have unclosed form tag --> 
     <button ng-click="addForms()">Add</button>

來源

2016-02-05 10:37:57

這裏是我對你的問題的看法以及我該怎麼做：

<div ng-controller="MyCtrl"> 
    <button ng-click="addBloc()"> 
    Add bloc 
    </button> 
    <div ng-repeat="bloc in blocs"> 
    <div> 
     <button ng-click="addNewField($index)"> 
     Add field 
     </button> 
    </div> 
    <div ng-repeat="field in bloc.fields"> 
     <select ng-model="field.gender"> 
     <option value="Male">Male</option> 
     <option value="Female">Female</option> 
     </select> 
     <input type="text" ng-model="field.FirstName"> 
     <input type="text" ng-model="field.LastName"> {{field.gender}} {{field.FirstName}} {{field.LastName}} 
    </div> 
    </div> 

</div>

和控制器：

$scope.blocs = []; 
    $scope.fields = []; 
    $scope.addNewField = function(index) { 
    alert(index); 
    $scope.blocs[index].fields.push({ 
     gender: "", 
     FirstName: "", 
     LastName: "" 
    }); 
    }; 
    $scope.addBloc = function() { 
    $scope.blocs.push({ 
     fields: [] 
    });

工作的jsfiddle：JSFIDDLE

基本思路是把你的字段NG重複內並將其綁定到一個空數組。當你點擊該按鈕時，它會在數組內添加一個空元素，該元素將自動綁定到ng-repeat的新元素。

快樂編碼！

編輯：我添加了另一個級別的重複字段，因爲我忘記了讀取整個請求。

來源

2016-02-05 10:41:11 Zonedark

這就是我得到..但我的問題是不同的..我需要再多一個按鈕裏面添加更多的按鈕..文我點擊，我需要得到一個下拉框（選擇標籤）以及輸入框。 – suma

在控制器內添加一個數組級別。檢查我的JSFIDDLE，我只是用你想要的更新它！ – Zonedark

其工作.. :) – suma

如何使用angularjs

回答

相關問題