anglejs属性から文字列を生成する

Question

私は、どのクラス（オブジェクト）がアクティブになっているかに基づいて文字列を生成するための小さなプロジェクトに取り組んでいます。私はそれが多少このように仕事をしたい：（I < = 30）（OBJ [$ i]を==のisActive）の場合のために

文字列= "X = 1"：文字列= "X = 0";？エコーx;

ここでは、オブジェクトをクリックするとクラスを有効または無効にするコントローラがあります。特定のクラスが有効になっているオブジェクトに基づいて文字列を生成するにはどうすればよいですか？ x = 1のような結果を得る。&y = 0 &z = 0 & xyz = 1。あなたは$スコープにangulajsを指示する必要があり、それは私のため

var classApp = angular.module('classApp', []); 
 
classApp.controller('classCtrl', function ($scope) { 
 
\t $scope.isActive1 = false; 
 
\t $scope.isActive2 = false; 
 
\t var build = ""; 
 
\t if($scope.isActive1==true?build="x=1&":build="x=0&"); 
 
\t $scope.link = build; 
 
});

body { 
 
    background: #fff; 
 
    -webkit-font-smoothing: antialiased; 
 
    padding: 40px; 
 
    text-align: center; 
 
} 
 
.active { 
 
\t -webkit-filter: grayscale(0%); 
 
    filter: grayscale(0%); 
 
} 
 
img { 
 
\t -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    width: 128px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="classApp" ng-controller="classCtrl"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" ng-class="{'active': isActive1}" ng-click="isActive1 = !isActive1"/> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" ng-class="{'active': isActive2}" ng-click="isActive2 = !isActive2"/> 
 
    test={{link}} 
 
</div>

Answer 1

を更新していないいくつかの理由が変更されると、あなたのコントローラに一度だけ設定されています。毎回$ watchコンセプトを使用して更新する必要があります。

var classApp = angular.module('classApp', []); 
 
classApp.controller('classCtrl', function ($scope) { 
 
\t $scope.isActive1 = false; 
 
\t $scope.isActive2 = false; 
 
\t var build = ""; 
 
\t 
 
    $scope.$watch('isActive1', function(newValue) { 
 
     if(newValue==true?build="x=1&":build="x=0&"); 
 
\t   $scope.link = build; 
 
    }); 
 
});

body { 
 
    background: #fff; 
 
    -webkit-font-smoothing: antialiased; 
 
    padding: 40px; 
 
    text-align: center; 
 
} 
 
.active { 
 
\t -webkit-filter: grayscale(0%); 
 
    filter: grayscale(0%); 
 
} 
 
img { 
 
\t -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    width: 128px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="classApp" ng-controller="classCtrl"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" ng-class="{'active': isActive1}" ng-click="isActive1 = !isActive1"/> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" ng-class="{'active': isActive2}" ng-click="isActive2 = !isActive2"/> 
 
    test={{link}} 
 
</div>