如何以angularjs方式执行以下jquery代码答案

【问题标题】：How to do the following jquery code in angularjs way如何以angularjs方式执行以下jquery代码
【发布时间】：2014-05-09 14:14:20
【问题描述】：

我是 angularjs 的新手，想以 angularjs 的方式做以下事情

控制器

$scope.Filter = function($event, active, id) {
    html = "";
         if(active){
                    $http({method: 'GET', url: "someUrl.json"}).
                    success(function(data, status) {

                    html+="<p>Hey i am inside if block</p>";                    
                    });
    $("#results-display").html(html);

               }

  else{
         $http({method: 'GET', url: "someotherUrl.json"}).
                    success(function(data, status) {

                    html+="<p>Hey i am inside else block</p>";                  
});
 $("#results-display").html(html);
    }
}

基本上我使用了 angularjs 控制器，但我通过将 json 数据附加到 html 来在控制器内部执行 jquery 方式。如何以 angularjs 方式显示返回的 json 数据？

【问题讨论】：

您可以将数据放入 $scope 变量中，然后在视图中引用它们。
我想把返回的数据插入到#results-display div标签中，怎么做？
可能类似于
然后在控制器中设置 $scope.yourData = data

标签： javascript jquery ajax angularjs checkbox

【解决方案1】：

控制器代码中应省略任何HTML 操作。如果必须在代码中完成，请使用Angular Directive。

但在您的情况下，不需要指令。要angularize您的示例，您应该只设置一个范围属性（我将其命名为isActive），而是在您的标记中提供正确的 HTML 显示，因为范围模型是您的 Javascript 控制器代码和您的HTML 视图。

Javascript

$scope.Filter = function($event, active, id) {
    if(active) {
        $http({
            method: 'GET',
            url: "someUrl.json"
        })
        .success(function(data, status) {
            // set $scope property
            $scope.isActive = true;
        });
    }
    else {
        $http({
            method: 'GET',
            url: "someotherUrl.json"
        })
        .success(function(data, status) {
            $scope.isActive = false;
        });
    }
};

这段代码可以很容易地缩短并且仍然可以做同样的事情。

$scope.Filter = function($event, active, id) {
    $http({
        method: "GET",
        url: active ? "someUrl.json" : "someotherUrl.json"
    })
    .success(angular.bind(active, function(data, status) {
        $scope.isActive = this;
    }));
};

HTML

<div id="results-display" ng-switch="isActive">
    <p ng-switch-when="true">Hey i am inside if block</p>
    <p ng-switch-when="false">Hey i am inside else block</p>
</div>

如果你不在代码中的任何地方使用这个 div，你可以完全省略它的 ID 属性，因为 angular 属性会相应地起作用。

更复杂的操作

如果此示例是更复杂的实际代码的简化版本（如果它不仅仅是关于是否处于活动状态），您还可以在控制器中设置文本值，然后在 HTML 中绑定到它。只要值是严格的原始值并且不涉及 HTML，这样做没有任何问题。任何其他范围属性也只是原语或对象/原语的对象。它们都只是数据。

...
$scope.activityText = "Hey i am inside if block";
...

然后在 HTML 中简单地绑定到这个范围属性

<div id="results-display">
    <p ng-bind="activityText"></p>
</div>

这意味着，无论何时您更改 $scope.activityText 值（无论是在您的 .Filter 函数中还是其他任何地方），它都会相应地反映在您的 HTML 中。

您也可以使用 {{}} 使用不同的表示法，但我更喜欢 ng-bind 属性，因为它不需要您在 Angular 启动之前也将 ng-cloak 放在元素上的 prevent unusual display 上。

【讨论】：