使用ng-bind在輸入內容上點擊按鈕時在角度材質中添加div使用ng-bind

我正在使用輸入窗體，並且想追加包含來自該輸入的數據的flexbox。每當用戶在輸入中輸入註釋並單擊該按鈕時，Flexbox-item需要被添加到包含該輸入文本的flexbox-container中。 Flexbox確實會在點擊後追加，但沒有文字。在buttoncontroller函數中，你可以看到我試圖附加flexbox div，但「usernote」根本不顯示。我究竟做錯了什麼？使用ng-bind在輸入內容上點擊按鈕時在角度材質中添加div使用ng-bind

HTML的

<md-content layout-padding> 
     <form name="projectForm" class="inputForm"> 
      <div class="inputContainer" ng-cloak> 
      <md-input-container class="md-block"> 
       <label>Add a note</label> 
       <input required class="usernote" ng-model="usernote"> 
       </md-input-container> 
       <md-input-container> 
       <label>Add Description</label> 
       <input required class="userdescription" ng-model="userdescription"> 
       </md-input-container> 
       <md-checkbox ng-model="data.cb1" aria-label="Category1"> 
     Category1 
     </md-checkbox> 
     <md-checkbox ng-model="data.cb1" aria-label="Category2"> 
     Category2 
     </md-checkbox> 
    <div class="buttondemo" ng-controller="buttonController"> 
<md-button ng-click="addnoteflex()" class="md-fab" aria-label="add"> 
       <md-icon class="material-icons">add</md-icon> 
      </md-button>    
    </div> 
    </div></form>

JS-

angular 
     .module('firstApplication', ['ngMaterial']) 
     .controller('buttonController', buttonController) 
     .controller('sideNavController',sideNavController) 
     .controller('speedDialController', speedDialController); 
    function sideNavController ($scope, $mdSidenav) { 
     $scope.openLeftMenu = function() { 
      $mdSidenav('left').toggle(); 
     }; 
    } 
    function buttonController ($scope) { 
     $scope.title1 = 'Button'; 
     $scope.title4 = 'Warn'; 
     $scope.isDisabled = true; 
     $scope.googleUrl = 'http://google.com'; 
     $scope.addnoteflex=function() 
     { 
     var myflexbox = angular.element(document.querySelector('.flex-container')); 

     myflexbox.append("<div ng-bind='usernote' class=\"flex-item\" layout=\"row\" layout-margin> </div>"); 
     } 
    } 
    function speedDialController ($scope) { 
     this.topDirections = ['left', 'up']; 
     this.bottomDirections = ['down', 'right']; 
     this.isOpen = false; 
     this.availableModes = ['md-fling', 'md-scale']; 
     this.selectedMode = 'md-scale'; 
     this.availableDirections = ['up', 'down', 'left', 'right']; 
     this.selectedDirection = 'down'; 
    }

來源

2017-07-16 Shivam Mishra

有兩種方法來解決這個問題。一，更新您的附加代碼，以這樣的：

myflexbox.append("<div class=\"flex-item\" layout=\"row\" layout-margin>"+ 
       $scope.usernote + "</div>");

那麼，你就會有電流範圍VAR值&使用它創建的HTML字符串。工作plunker鏈接：https://plnkr.co/edit/Sj0rxDReVxSWU7zhDJWz?p=preview

其他的解決辦法是你已經編譯包含使用$編譯角度表達繩子，讓你的函數的代碼看起來：

$scope.addnoteflex=function(){ 
    var myflexbox = angular.element(document.querySelector('.flex-container')); 
    var myhtml = "<div ng-bind='usernote' class=\"flex-item\" layout=\"row\" layout-margin> </div>"; 
    var content = $compile(myhtml)($scope); 
    $timeout(function(){ 
     myflexbox.append(content); 
    }); 
};

但我猜你不想要這個。因爲當然這個附加字符串是用ng-bind綁定的，所以它會表現爲一個動態數據塊，當你改變輸入值時它的值會不斷更新，所以它不會是常量。如果您希望它像上述解決方案一樣工作，請在每次單擊添加按鈕時創建動態變量&然後使用它將數據綁定到div。

相反，你可以做的是在添加按鈕，您只需按下usernote值國有企業票據陣列&負載只是追加該HTML串NG-重複上地注意到usernote數組，而不是NG綁定：

var myhtml = "<div ng-repeat='note in notesArray track by $index' 
     class=\"flex-item\" layout=\"row\" layout-margin> {{note}} </div>"; 
var content = $compile(myhtml)($scope); 
$timeout(function(){ 
    myflexbox.append(content); 
});

這裏的工作plunker例子：https://plnkr.co/edit/extO5UI0RgMPYXJsylny?p=preview

來源

2017-07-16 10:36:59 Shantanu

使用ng-bind在輸入內容上點擊按鈕時在角度材質中添加div使用ng-bind

回答

相關問題