Question

我有一个非常奇怪的问题。我必须在active时在相应的<li>上设置$scope.selectedCat == cat.id课程。该列表使用ng-repeat生成。如果selectedCat为false，则“浏览所有类别”＆＃39;列表项（在ng-repeat之外）设置为活动状态。 setCat()设置$scope.selectedCat变量的值：

<div id="cat-list" ng-controller="CatController">
    <li ng-class="{'active': {{selectedCat == false}}}">
        <a>
            <div class="name" ng-click="setCat(false)" >Browse All Categories</div>
        </a>
    </li>
    <li class="has-subcat" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': {{selectedCat == cat.id}}}">
        <a>
            <div cat class="name" ng-click="setCat({{cat.id}})" ng-bind-html="cat.name | highlight:catsearch"></div>
        </a>
    </li>
</div>

当页面加载时，一切正常（来自FireBug的快照）：

<li ng-class="{'active': true}" class="ng-scope active">
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': false}">

但是，当我将$ scope.selectedClass设置为cat.id值时，ng-class中的条件会被正确评估，但ng-class不会相应地更新类：

<li ng-class="{'active': false}" class="ng-scope active"> <!--Right here!-->
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': true}">

请注意，在第一行中，活动类保持设置，而ng-class的计算结果为false。在最后一行中，未设置active，而ng-class的计算结果为true。

为什么它不起作用的任何想法？什么是正确的Angular方式？

Answer 1

替换：

ng-class="{'active': {{selectedCat == cat.id}}}"

使用：

ng-class="{'active': selectedCat == cat.id}"

你永远不需要在Angular中嵌套那样的花括号。

请查看ng-class documentation以获取更多示例。

Answer 2

而不是

ng-class="{'active': {{selectedCat == cat.id}}}"

使用

ng-class="{active: selectedCat == cat.id}"

Answer 3

嗨，我也面临同样的问题。我通过这种方式解决了问题，而不是直接将值赋给ng-class，调用单独的方法并返回值。

前：

public function add(){
    $this->loadModel('User'); //load model      
    if($this->request->is('post')){ 
        $filename=$this->User->checkFileUpload($this->request->data);
        $this->User->set($this->request->data); //set data to model                         
        if ($this->User->validates()){
            $datas = array(
                    'User' => array(
                                'name' => $this->request->data['User']['name'],
                                'email'=>$this->request->data['User']['email'],
                                'password'=>$this->request->data['User']['password'],
                                'image'=>$filename
                        )
                    );  
            $pathToUpload=  WWW_ROOT . 'upload/';           
            move_uploaded_file($this->request->data['User']['image']['tmp_name'],$pathToUpload.$filename);                      
            // prepare the model for adding a new entry
            $this->User->create();
            // save the data
            if($this->User->save($datas)){
                //$this->Session->setFlash('User Information has been saved!');
                return $this->Flash('User Information has been saved!',array('action' => 'index'));
                //return $this->redirect(array('action' => 'index'));
            }
        } else {
            $errors = $this->User->validationErrors; //handle errors    
        }   
    }
    //$this->layout = NULL;
    $this->viewpPath='Users';
    $this->render('add');
}

大致是我编码的。请根据您的要求更改方法。

Answer 4

扩大答案@Cerbrus给出了：

替换：

public function index() { $this->data['users'] = $this->user_m->get(); $this->data['subview'] = 'admin/user/index'; $this->load->view('admin/_layout_main', $data); }

使用：

<div class="span9"> <?php $this->load->view($subview); ?> </div>

我使用过滤器的表达式存在问题，如果没有双花括号ng-class="{'active': {{selectedCat == cat.id}}}"，则无法正确评估。

示例：ng-class="{'active': selectedCat == cat.id}"

我通过括号而不是花括号来解决它。

解决方案：{{ }}

Answer 5

您解决了吗？

我认为您应该使用

ng-class="{'active': {{controller.selectedCat == cat.id}}}"

使用：

ng-class="{'active': controller.selectedCat == cat.id}"

这将为您提供帮助。

ng-class条件更改，但不更新类

5 个答案: