Ngリピート内のスパンの値を設定する方法

Question

コンテンツが正しく表示されているマイデータモデルのコンテンツを表示するには、ng-repeatを使用しています。しかし、私は連絡先アプリケーションを作成しているので、その中のテキストを含む円の形を利用して、リスト内の各連絡先のファーストネームとファーストネームの最初の文字を表示します。以下に見られることができます。

HTML：

<ul class="collection" ng-show="customers.length"> 
     <li class="collection-item avatar" ng-click="showUserDetail(customer.id)" ng-repeat="customer in customers | orderBy: 'first_name' | filter: searchText" ng-class="{'active': customer.id == selectedUser.id}"> 
      <span ng-init="setContactCircle(customer.first_name,customer.last_name)" id="contact-info" class="contact-circle">TC</span> 
      <span class="title">{{customer.first_name}} {{customer.last_name}}</span> 
      <p>{{customer.email}} 
       <br> {{customer.mobile_number}} 
      </p> 
     </li> 
    </ul> 

JS：

$scope.setContactCircle = function(first_name,last_name) { 
    var strFirst = first_name.charAt(0); 
    var strLast = last_name.charAt(0); 
    var strName = strFirst + strLast; 

    /* span = document.getElementById("contact-info"); 
    txt = document.createTextNode(strName); 
    span.innerHTML = txt.textContent; */ 

    //document.getElementById("contact-info").innerHTML = strName; 

    $("#contact-info").text(strName); 
    console.log(strName); 
} 

NG-INITを最初の名前から最初の文字と最後から最初の文字として働いているように見えます名前はconsole.logのコンソールに出力されています（strName）; 'テキストはスパンクラスに設定されていません。

EDIT

は、以下の問題を解決したあなたの助けありがとうございました。

HTML：

<span ng-bind="setContactCircle(customer)" id="contact-info" class="contact-circle"></span> 

JS：

$scope.setContactCircle = function(customer) { 
    var strFirst = customer.first_name.charAt(0); 
    var strLast = customer.last_name.charAt(0); 
    return strFirst + strLast; 
} 

Answer 1

jqueryとangularを混合しています。どちらもDOMを操作しようとしており、通常は一緒にうまく遊ばない。

あなたは試してみてくださいでした - あなたのコントローラから

<span ng-bind="setContactCircle(customer)" id="contact-info" class="contact-circle"></span> 


$scope.setContactCircle = function(first_name,last_name) { 
    var strFirst = first_name.charAt(0); 
    var strLast = last_name.charAt(0); 
    return strFirst + strLast; 
} 

Answer 2

HTML：

<ul class="collection" ng-show="customers.length"> 
    <li class="collection-item avatar" ng-click="showUserDetail(customer.id)" ng-repeat="customer in customers | orderBy: 'first_name' | filter: searchText" ng-class="{'active': customer.id == selectedUser.id}"> 
     <span ng-init="setContactCircle(customer)" id="contact-info" class="contact-circle">customer.circle</span> 
     <span class="title">{{customer.first_name}} {{customer.last_name}}</span> 
     <p>{{customer.email}} 
      <br> {{customer.mobile_number}} 
     </p> 
    </li> 
</ul> 

JS：

$scope.setContactCircle = function(customer) { 
    customer.circle = customer.first_name.charAt(0) + customer.last_name.charAt(0); 
} 

Answer 3

Manupulating DOM要素が悪い角度デザインです。 $（ "＃contact-info"）。テキストを使用する代わりに、あなたは角度データバインディングを利用できます。