使用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

回答

相关问题