angularjs變化附加文本每名

如何從一個單一的輸入字段分別改變附加文本名稱.. https://jsbin.com/lihamizuta/edit?html,js,output < - 在這裏點擊我jsbin一次.. 我在這事件完全混亂，任何人可以請幫助我..angularjs變化附加文本每名

var app = angular.module('myapp', ['ngSanitize']); 
 

 
app.controller('AddCtrl', function ($scope, $compile) { 
 

 
    $scope.field = {single: 'untitled'}; 
 
    $scope.addNew_SingleField = function (index) { 
 
     var singlehtml = '<fieldset id="single_field" ng-click="selectSingle($index)">//click me once// <label ng-bind-html="field.single"></label> <input type="text" placeholder="Enter name"><button ng-click="removeSingle($index)">-</button></fieldset>'; 
 
     var single = $compile(singlehtml)($scope); 
 
     angular.element(document.getElementById('drop')).append(single); 
 
    }; 
 
    $scope.removeSingle = function (index) { 
 
     var myEl = angular.element(document.querySelector('#single_field')); 
 
     myEl.remove(); 
 
    }; 
 
    $scope.selectSingle = function (index) { 
 
     $scope.showSingle_Fieldsettings = true; 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="myapp"> 
 

 
<head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script> 
 
\t <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script> 
 
</head> 
 

 
<body ng-controller="AddCtrl"> 
 
\t <button ng-click="addNew_SingleField($index)">Click me again</button> 
 
\t <div id="drop"></div> 
 

 
\t <form ng-show="showSingle_Fieldsettings"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label>Field Label name change here (?)</label> 
 
\t \t \t <br/> 
 
\t \t \t <input ng-model="field.single" class="fieldLabel"> 
 
\t \t </div> 
 
\t </form> 
 

 
</body> 
 

 
</html>

來源

2016-01-06 Vijju Sena

請解釋一下你想要做什麼？ – micronyks

如果我們點擊字段將如下圖所示，如果我們點擊提交標籤選項，將顯示的字段的任何地方按鈕多次,,,我想從單一的顯示字段標籤輸入選項seperately改變「無題」的標籤名稱..請幫我 –

你沒有關注的做事方式角 - 你只是附加元素的jQuery風格的頁面，而不是從一個模型對象結合。這意味着一切都在1範圍內，所以當您更改一行的名稱時，所有行都會更新。

你最好是去創建你的範圍數組，然後綁定，使用ng-repeat顯示的行並在編輯框中更新。

請注意，當我們向模型添加新條目時，我們不只是添加一個空字符串，而是添加一個名稱爲屬性的對象（{name:''}）。這是爲了解決跨範圍傳遞簡單類型的問題 - 有關詳細信息，請參見this answer。

var app = angular.module('myapp', ['ngSanitize']); 
 

 
app.controller('AddCtrl', function($scope, $compile) { 
 

 
    // out array of names - we manipulate his instead of the HTML 
 
    $scope.names = []; 
 
    // this will store the name we are currently editing 
 
    $scope.currentEdit = null; 
 

 
    $scope.field = { 
 
    single: 'untitled' 
 
    }; 
 

 
    // add an entry to the array instead of cerating an element 
 
    $scope.addNew_SingleField = function(index) { 
 
    $scope.names.push({name: ''}); 
 
    }; 
 

 
    // remove the array entry at the chosen index 
 
    $scope.removeSingle = function(index) { 
 
    $scope.names.splice(index, 1); 
 
    }; 
 

 
    // set currentEdit to the name object we are editing 
 
    $scope.selectSingle = function(value) { 
 
    $scope.currentEdit = value; 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="myapp"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script> 
 
    <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script> 
 
</head> 
 

 
<body ng-controller="AddCtrl"> 
 
    <button ng-click="addNew_SingleField($index)">Click me again</button> 
 
    <div id="drop"> 
 
    <!-- use ng-repeat to display the list of names --> 
 
    <fieldset ng-repeat="n in names" id="single_field" ng-click="selectSingle(n)">//click me once// 
 
     <label ng-bind-html="field.single"></label> 
 
     <input type="text" ng-model="n.name" placeholder="Enter name"> 
 
     <button ng-click="removeSingle($index)">-</button> 
 
    </fieldset> 
 
    </div> 
 

 
    <form ng-show="currentEdit"> 
 
    <div class="form-group"> 
 
     <label>Field Label name change here (?)</label> 
 
     <br/> 
 
     <input ng-model="currentEdit.name" class="fieldLabel"> 
 
    </div> 
 
    </form> 
 

 
</body> 
 

 
</html>

來源

2016-01-06 12:18:49 Rhumborl

嗨@Rhumbori ..你給出兆瓦大suggetion，非常感謝你爲你的努力，但我用NG-重複已經嘗試過，我得到的結果，但我有很多不同類型的字段的追加到一個DIV ,,必須每個類型的字段同時追加...如果我在附加數據使用NG-重複,,事件而不能正常工作,, –

u能請幫助我這樣做同樣的事件通過改變附加價值，而不是使用推或ng重複功能... –

我不確定你的意思。你能否更新你的問題來解釋這些不同的字段類型如何一起工作？你的意思是你有，例如姓名和年齡，並且您希望有一個表單來編輯頁面底部的兩個字段？或者他們可以點擊姓名並編輯姓名，或點擊年齡並編輯年齡？ – Rhumborl

angularjs變化附加文本每名

回答

相關問題