javascript - Angular JS 中的 If 语句 (Ngif)

Question

我有这段代码，可以在连接到此应用程序时显示 Facebook 用户的用户名和图片。

 <div class="item item-avatar" ng-controller="LoginCtrl" ng-show="showProfile">
      <img src="{{user.picture}}">
        <h2>{{user.name}}</h2>
        <p>Reporter</p>
  </div>

因此，如果用户通过应用程序使用 Facebook 登录，用户名和个人资料图片将显示... {{user.picture}} & {{user.name}} 所以我想做的是显示用户未登录的不同情况...如果用户未登录，我想仅显示纯文本，例如“没有登录的用户。”

所以尝试了这些代码但未能得到它

 <div ng-if="user.name !== '{{user.name}}'">
      <div class="item item-avatar">
          <img src="https://media.licdn.com/mpr/mpr/p/5/005/06f/16e/232e2d4.jpg">
          <h2>No logged in user</h2>
      </div>
 </div>


 <div ng-if="user.name === '{{user.name}}'">
      <div class="item item-avatar" ng-controller="LoginCtrl" ng-show="showProfile">
          <img src="{{user.picture}}">
          <h2>{{user.name}}</h2>
          <p>Reporter Name</p>
    </div>
 </div>

并且

<div ng-repeater="user in users">
    <div>{{user.name}}</div>
    <div ng-show="isExists(user)">available
        <div class="item item-avatar" ng-controller="LoginCtrl" ng-show="showProfile">
            <img src="{{user.picture}}">
              <h2>{{user.name}}</h2>
              <p>Reporter</p>
        </div>
    </div>
    <div ng-show="!isExists(user)">No logged in user</div>
</div>

使用 ng-if 或 ng-repeater 有什么解决方案或替代方案吗？对 AngularJS 不太熟悉。

Answer 1

您不在 Angular 表达式中使用“handlebars”语法。例如，这是正确的:

<div id="{{user.name}}" ng-if="user.name">{{user.name}}</div>

这是不正确的:

<div id="{{user.name}}" ng-if="{{user.name}}">{{user.name}}</div>

确保您的网络浏览器的 Javascript 控制台保持打开状态。这将为您突出显示任何错误。

您使用的比较 -- "user.name !== '{{user.name}}'" -- 不起作用。更具体地说，user.name永远不会等于'{{user.name}}'。这是因为您告诉 Angular 将用户名与实际字符串“{{user.name}}”进行比较。这与执行以下操作相同:

var myVariable = 42;
if(myVariable === "myVariable"){
  // do something
}

无论如何，我并不完全确定你要做什么...用户名总是等于用户名，就像myVariable 将始终等于 myVariable，并且 42 将始终等于 42。

var myVariable = 42;
myVariable === "myVariable";
// false
myVariable === myVariable;
// true
42 === "42";
// false
42 === 42;
// true
42 == "42";
// true
myVariable === 42;
// true
myVariable === "42";
// false
myVariable == "42";
// true
myVariable === true;
// false
myVariable == true;
// false

如果您只想检查 user.name 是否存在，请尝试以下语法:

<div ng-if="user.name">The user is logged in!</div>
<div ng-if="!user.name">The user is not logged in.</div>