Question

我在我的应用中使用以下插件：http://firedev.com/jquery.keynav/

我的json文件：

private ContactListAdapter mAdapter;

private void populateList() {
    mAdapter = new ContactListAdapter();
    contactListView.setAdapter(mAdapter);
}

private void addContact(String name,String phone,String email,String address) {
    Contacts.add(new Contact(name,phone,email,address));
    mAdapter.notifyDataSetChanged();

}

final Button addBtn=(Button) findViewById(R.id.btnAdd);
addBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        addContact(nameTxt.getText().toString(),phoneTxt.getText().toString(),emailTxt.getText().toString(),addressTxt.getText().toString());
        Toast.makeText(getApplicationContext(),nameTxt.getText().toString() +"has been added to your contacts!",Toast.LENGTH_SHORT).show();
    }
});

我的html with angular：

[
  {
    "appName": "Some name",
    "appDesc": "Some Description",
  },

  {
    "appName": "Other name",
    "appDesc": "Other Description",
  }
]

我没有角度的HTML：

<li ng-repeat="app in apps">
   <a class="selected" href="#">
     <p>{{app.appName}}</p>
     <span>{{app.appDesc}}</span>
   </a>
</li>

问题： Angular在我的json文件中显示列表项就好了。但是，当以角度方式进行时，它不会添加/删除“选定”类。当我使用静态html时，它会添加/删除所选的类。我尝试在列表之前的标签中添加ng-repeat，但仍然是同样的问题。我也尝试添加“选择”的屁股类（因为第一个是在静态html中），但随后所有项目都获得该类。

如果有经验的人可以帮我解决这个非常烦人的问题，我将非常感激。

Answer 1

正如您链接的文档所说，根本不要设置所选的类。然后默认情况下会为您选择第一个。

<li ng-repeat="app in apps">
   <a href="#">
     <p>{{app.appName}}</p>
     <span>{{app.appDesc}}</span>
   </a>
</li>

或者，您可以使用$first仅将类应用于第一个链接。

<li ng-repeat="app in apps">
   <a href="#" ng-class='{selected:$first}'>
     <p>{{app.appName}}</p>
     <span>{{app.appDesc}}</span>
   </a>
</li>

第三个选项

我怀疑当你致电$('a').keynav();时，尚未呈现DOM。要解决此问题，您可以使用$ timeout来延迟代码，直到ng-repeat运行完毕。

app.controller("myController", function($scope, $timeout){

    $scope.apps = 
    [
      {
        "appName": "Some name",
        "appDesc": "Some Description",
      },

      {
        "appName": "Other name",
        "appDesc": "Other Description",
      }
    ];

    $timeout(function () {
        $('#navigation a').keynav();
    })
})

我想如果你想要正确，因为这是DOM操作，你应该将它封装在一个指令中。但是我会把它留给你。

<小时/> _{（受欢迎的需求）} 工作示例：
https://jsbin.com/tejecizeqi/2/edit?html,css,js,output

样式有点时髦，我不得不复制所有的keynav库代码。 您可以滚动到JS平面的底部以查看我的代码。
我不得不稍微调整一下css以使其可见，但你可能不需要在一个真实的项目上。

您需要先点击黑色平面才能获得焦点。同样，在实际应用中，这不是必需的。

Answer 2

不要复制粘贴代码。自己编写代码。

html不支持此”之类的引号。用"替换所有这些。

使用”时，html属性无效。

Answer 3

如果我已正确理解您的问题，您正在尝试有条件地添加课程。你可以这样做

<div ng-repeat="item in items" ng-class="{selected: item.selected}">{{item.name}}</div>

使用ng-repeat时无法添加和删除类

3 个答案: