Question

这是我的index.html文件。

<!doctype html>
    <html lang="en" ng-app="phonecatApp">
      <head>
        <meta charset="utf-8">
        <title>Google Phone Gallery</title>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="app.css" />
        <script src="bower_components/angular/angular.js"></script>
        <script src="app.js"></script>
        <script src="phone-list.component.js"></script>
      </head>
      <body>

        <!-- Use a custom component to render a list of phones -->
        <phone-list></phone-list>

      </body>
    </html>

这是我的phone-list.component.js文件

// Register 'phoneList' component, along with it's associated controller and template'

angular.
  module('phonecatApp').
  component('phoneList', {
    template: 
      '<ul>' + 
      '<li ng-repeat="phone in $ctrl.phones">' + 
      '<span>{{phone.name}}</span>' + 
      '<p>{{phone.snippet}}</p>' + 
      '</li>' + 
      '</ul>' + '<h3>To be honest, my real name is {{me.name}}</h3>', 
      controller: function phoneListController() {
        this.phones = [
          {
            name:'Nexus 5', 
            snippet: 'Fast just got faster with Nexus 5'
          }, 
          {
            name: 'Motorolla Xoom with Wi-Fi', 
            snippet: 'The Next, Next Generation Tablet'
          },
          {
            name: 'Motorolla Xoom', 
            snippet: 'The Next, Next Generation Tablet'
          }
        ];

        this.me = [
          {
            name: 'shameem',
            age: 18
          }
        ]

      }
  });

me.name应显示在index.html页面的phone-list组件中。我不明白为什么me.name没有显示在页面中。

Answer 1

请使用以下代码

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HomePage</title>
<script src="JavaScript/SpryMenuBar.js" type="text/javascript"></script>
<link href="styles/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>


<ul id="MenuBar1" class="MenuBarVertical">
  <li><a href="#">Update Limit</a></li>
  </li>
  <li><a href="#">Delink Account</a></li>
  <li><a href="#">Edit CardNumber</a>

  </li>
  <li>
    <a href="#">Linked Accounts</a>
  </li>
  <li><a href="#">SMS Alerts</a>
  <li><a href="#">Join Account</a>


</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>


  <hr />
<hr />
<form>
  <p>
          Client Details
  <hr />
  <hr />
  </p>
  <p>Mobile Number:- 
    <label>
      <input type="text" name="mobilenumber" id="mobilenumber" /> 
    </label>

  </p>
<p>Country:- 
    <label>
      <input type="text" name="country" id="country"  /> 
    </label>

  </p>

<input type="submit" formaction="Search" formmethod="post" name="New" id="New" value="Search" />





  <p> Title:-
    <input type="text" name="Title" id="Title" value='Mr' />
  </p>
  <p>Middle Name:- 
    <label>
      <input type="text" name="MiddleName" id="Middle Name" />
    </label>
  </p>
  <p>Address:- 
    <label>
      <input type="text" name="address" id="address" />
    </label>
  </p>
  <p>City:- 
    <label>
      <input type="text" name="City" id="City"value='AWENDO'/>
    </label>
  </p>
  <p>Type of ID:- 
    <label>
      <input type="text" name="Idtype" id="Idtype" value='Driving License' />
    </label>
  </p>
  <p>Elma ID:- 
    <label>
      <input type="text" name="elmaid" id="elmaid" value='1916507095'/>
    </label>
  </p>
  <p>First Name:- 
    <label>
      <input type="text" name="firstname" id="firstname" value='Pramod1' />
    </label>
  </p>
  <p>Last Name:- 
    <label>
      <input type="text" name="LastName" id="LastName" value='Sahoo'/>
    </label>
  </p>
  <p>Registration Branch:- 
    <label>
      <input type="text" name="registrationbranch" id="registrationbranch" />
    </label>
  </p>
  <p>Email address:- 
    <label>
      <input type="text" name="emailid" id="emailid" value='Pramodk@CS.com' />
    </label>
  </p>
  <p>ID No:- 
    <label>
      <input type="text" name="idno" id="idno" />
    </label>
  </p>
  <hr />
<hr />
  <p>
          Account Details
  <hr />
  <hr />
  </p>

  <p>Bank A/C id :- 
    <label>
      <input type="text" name="accountid" id="accountid"value='001001000095' />
    </label>
  </p>
  <p>Transaction Limit:- 
    <label>
      <input type="text" name="transactionlimit" id="transactionlimit" />
    </label>
  </p>
  <p>Currency:- 
    <input type="text" name="currency" id="currency"value='KES'/>
  </p>
  <p>Daily Limit:- 
    <label>
      <input type="text" name="dailylimit" id="dailylimit" value='500000.0000'/>
    </label>
  </p>
  <p>
    <input type="submit"formaction="Connectioncheck" formmethod="post"name="Update" id="Update" value="Update" />
  </p>
  <p>&nbsp;</p>
  <hr />
  Account List
  <hr />



  <table
            <tr>
                <td colspan=4 align="center"
                    style="background-color:teal">
                    <b>User Record</b></td>
            </tr>
            <tr style="background-color:lightgrey;">
                <td><b>Record Number: </b></td>
                <td><b>Card Number: </b></td>
                <td><b>MiddleName:</b></td>
                <td><b>BankAccountID:</b></td>
                <td><b>CurrencyID:</b></td>
                <td><b>DayTransactionLimit:</b></td>
                <td><b>Select:</b></td>


</tr>
  <tr>
<td>1</td>
<td>kenya</td>
<td>K</td>
<td>432342423</td>
<td></td>
<td>100000.0000</td>
<td><input type ="button" id="getid" onclick="getbuttonid(this)" value="1"></td>
<tr>
<td>2</td>
<td>kenya</td>
<td>Kumar11</td>
<td>78788787878</td>
<td>OOOPP</td>
<td>100000.0000</td>
<td><input type ="button" id="getid" onclick="getbuttonid(this)" value="2"></td>
<tr>
<td>3</td>
<td>kenya</td>
<td>Kb1</td>
<td>001001000095</td>
<td>KES</td>
<td>500000.0000</td>
<td><input type ="button" id="getid" onclick="getbuttonid(this)" value="3"></td>



  </table>          






</table


  <hr />
  Behind the Scene
  <hr />







  <p>Created By:-
    <label>
      <input type="text" name="createdby" id="createdby" />
    </label>
  </p>
  <p>Created On:- 
    <label>
      <input type="text" name="createdon" id="createdon" />
    </label>
  </p>
  <p>Modified By:- 
    <label>
      <input type="text" name="modifiedby" id="modifiedby" />
    </label>
  </p>
  <p>Modified On:- 
    <label>
      <input type="text" name="modifiedon" id="modifiedon" />
    </label>
  </p>
  <p>Supervised By:- 
    <label>
      <input type="text" name="supervisedby" id="supervisedby" />
    </label>
  </p>
  <p>Supervised On:- 
    <label>
      <input type="text" name="supervisedon" id="supervisedon" />
    </label>
  </p>
  <p>
      <input type="submit" name="Add" id="Add" value="Add" formmethod="post" formaction="AddController" />
    <input type="submit" name="Edit" id="Edit" value="Edit" formmethod="post" formaction="EditController" />
    <input type="submit" name="Save" id="Save" value="Save" />
   <input type="submit" name="Cancel" id="Cancel" value="Cancel" />
  <input type="submit" name="Recreate Key" id="Recreate Key" value="Recreate Key" />

    <input type="submit" name="Reset Password" id="Reset Password" value="Reset Password" />




  </p>

</form>

<script type="text/javascript">

function getbuttonid(el){
    alert(el.value);
}

</script>

而不是

'</ul>' + '<h3>To be honest, my real name is {{$ctrl.me[0].name}}</h3>',

此问题是因为您正在使用数组对象并尝试直接访问它。否则你可以使用ng-repeat

或者其他制作

'</ul>' + '<h3>To be honest, my real name is {{$ctrl.me.name}}</h3>',

而不是

this.me =  {name: 'shameem', age: 18}

如果将“this.me”更改为object而不是array

，则可以使用相同的HTML

角度组件中的模板未按预期工作。

1 个答案: