Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: Angular 2, AngularJS
Войти
Регистрация
Восстановить пароль
 
azotklas
0 / 0 / 1
Регистрация: 16.09.2014
Сообщений: 26
1

Index в массивах и редактирование текста

02.06.2015, 17:55. Просмотров 336. Ответов 2
Метки нет (Все метки)

Здравствуйте, недавно начал изучать AngularJS/ возникала такая проблема!
Значит у меня есть список из название специальностей на факультете. при нажатии на специальность должно раскрываться описание! потом должна быть кнопка для редактирования этого описания. при нажатии на эту кнопку текст должен редактироваться, а при нажатии на сохранить сохранятся! все просто

значит вот что я сделал.
я сделал специальности и описания для них. все раскрывается! хорошо!
сделал так что бы при нажатии на карандаш текст заходил в textarea и его можно было редактировать, но он не сохраняется! как это реализовать! ?? и проблема номер два. когда я раскрываю описание, нажимаю на карандаш, текст загоняется в текстареа. я потом нажимаю на другую специльность и это редактирование переносится туда. то есть index не устанавливаются!

вот исходные файлы. посмотрите!
понажимайте редактиировать и потом откройте другую специальность и поймете в чем проблема. как ее избежать! и сохранить редактирование как

index.html
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController">
<div id="vse">
 
 
 
<div id="header">
    <div id="logo">
        <a href="#"><img src="img/logo.white.gif" id="logo_a_img"></a>
        <h1>Механико-математический факультет</h1>
        <h2>Белорусского Государственного Университета</h2>
    </div>
    <div id="logo_foto">
    <span id="language">
    <img src="img/icon.flag.eng.gif">
    <p>English</p>
    </span>
    </div>
</div>
 
 
<div id="menu">
    <table>
        <tr>
            <td><a href="#1">Факультет</a></td>
            <td id="palka">|</td>
            <td><a href="#2">Кафедра</a></td>
            <td id="palka">|</td>
            <td><a href="#3">Наука</a></td>
            <td id="palka">|</td>
            <td><a href="#4">Студенту</a></td>
            <td id="palka">|</td>
            <td><a href="#5">Абитуриентам</a></td>
            <td id="palka">|</td>
            <td><a href="#6">Летопись</a></td>
            <td id="palka">|</td>
            <td><a href="#7">Контакты</a></td>
            <td id="palka">|</td>
        </tr>
    </table>
</div>
 
 
<div id="content">
    <div id="nav"><a href="#">Абитуриентам</a> > <a href="#">О специальностях</a></div>
    <div id="v_contente">
        <div id="left_span">
            <table>
                <tbody>
                    <tr>
                        <td class="top_left">
                            <span id="abityrient"> <img src='img/2323.jpg' id="iconca_abtyr">Абитуриенту</span>
                            <hr>
                        </td>
                        
                    </tr>
                    <tr>
            
                        <td class='main'>
                            <ul class="spisok">
                                <li> <a href="#12">О специальности </a> </li>
                                <li> <a href="#13">Олимпиады школьников</a> </li>
                                <li> <a href="#14">Школа для абитуриентов</a> </li>
                                <li> <a href="#15">Конференции </a> </li>
                                <li> <a href="#16">День открытых дверей</a> </li>
                                <li> <a href="#17">Подготовка к тестированию</a> </li>
                            </ul>
                        </td>
                        
                    </tr>
                    <tr>
                        <td class='bottom_left'>
                            <hr>
                        </td>
                        
                    </tr>
                </tbody>
            </table>
 
        </div>
    
    <div id="right">
        <table>
                <tbody>
                    <tr>
                        <td class="top_left">
                            <span id="abityrient"> <img src='img/2323.jpg' id="iconca_abtyr">Специальности</span>
                            <div id='filter'> 
                                <input ng-model="search.name" placeholder='Search:' size='15px'>
                                <P style='float:right; width:350px;'>Проходной балл от: <input type='text' ng-model='search.ball'  size='7'></P>
                            </div>
                            <hr>
                        </td>
                        
                    </tr>
                    <tr>
            
                        <td class='main'>
                        <ul class="spisok">
                            <li  ng-repeat="specialty in specialtys | filter: search">
                                 <a href="#21" ng-click="hide=!hide">{{ specialty.name }}</a>  
                                
                                    <div ng-show="hide">
                                          <p ng-hide="editorEnabled" id="description">
                                            {{ specialty.description }} 
                                             <a href="" ng-click="enableEditor($index)"><img src="img/edit.png" style='width:9px; height:9px;'></a>
                                          </p> 
 
                                          <br/> 
                                          
 
                                         <div ng-show="editorEnabled">
                                            <textarea cols='90px'  rows='7px' ng-model="editableTitle" ng-show="editorEnabled"></textarea>
                                            <br>
                                                <a href="#" ng-click="save($index)">Save</a>
                                                or
                                                <a href="#" ng-click="disableEditor($index)">cancel</a>.
                                            
                                        </div>
                                        <a  href={{specialty.site}} style="float:right; background-color:#234; padding:2px; color:white;" target="_blank" >Прочитать подробней</a>
                                    </div>
                                 
 
                                
                            </li>
                        </ul>
                        </td>
                        
                    </tr>
                    <tr>
                        <td class='bottom_left'>
                            <hr>
                        </td>
                        
                    </tr>
                </tbody>
            </table>
 
    </div>
    </div>
</div>
 
 
 
 
 
<div id="footer">
<br>
    <hr width="95%" style="margin:0 auto; border:1px solid grey;" >
    <div id="footer_text">
            <p>© 2005 — 2014 Механико-математический факультет БГУ.</p> 
 
            <p>Создатели сайта: <a href="#111">БахмутскийЮ.A.</a>,<a href="#112">Климченя О.Ю.</a>,<a href="#113">Романчик Т.И..</a></p>
 
            <p>Сайт работает на платформе DotNetNuke 3.2.2  </p>
 
            <p>Полезные ссылки: <a href="#114">Сайт БГУ</a>, <a href="#115">Наука БГУ</a>, <a href="#116">Электронная библиотека БГУ</a>, <a href="#117">Фундаментальная библиотека БГУ</a>, <a href="#118">газета "Университет"</a>, <a href="#119">Академия наук.</a> </p>
 
 
            <p><a href="#122">Зарегистрироваться</a>     <a href="#121">Вход</a></p>
    </div>
</div>
 
 
 
 
</div>
</body>
</html>


angular
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
var app = angular.module("myApp", []);
app.controller('mainController', function($scope) {
    $scope.hide = false;
    $scope.specialtys = [
        {
            name: 'Математика и информационные технологии',
            description: 'Общеизвестно, что лучшими специалистами в области разработки ' +
            'программного обеспечения являются математики, поскольку они, помимо узких специальных знаний, ' +
            'обладают аналитическим мышлением, способностью быстро обучаться и находить решения ' +
            'новых задач и проблем. Поэтому отличительной чертой специальности “Математика и информационные технологии” ' +
            'является сочетание обучения фундаментальным математическим дисциплинам и самым современным языкам ' +
            'и технологиям программирования, таким как Java, C#, С++, PHP, .NET, J2EE, XML, UML и др.',
            site: 'http://www.mmf.bsu.by/Default.aspx?tabid=439',
            ball: '317'
        },
        {
            name: 'Компьютерная математика и системный анализ',
            description: 'Обучаясь на специальности «Компьютерная математика и системный анализ»,' +
    
            ' области производства – информационных технологиях и наукоёмких разработках.',
            site: 'http://www.mmf.bsu.by/Default.aspx?tabid=543',
            ball: '315'
        },
        {
            name: 'Научно-конструкторная деятельность  ',
            description: 'Открытие направления "Научно-конструкторская деятельность" на' +
            'механико-математическом факультет было стимулировано переходом к созданию и регулярному ' +
           
            'стала требовать наличия у конструкторов в первую очередь глубоких знаний в области математики ' +
            'и информатики.',
            site: 'http://www.mmf.bsu.by/Default.aspx?tabid=141',
            ball: '272'
        },
        {
            name: 'Математика. Экономическая деятельность  ',
            description: 'Основу образовательного процесса составляют фундаментальные математические курсы, ' +
            'читаемые на механико-математическом факультете. Среди них курсы математического анализа, алгебры, ' +
           
            'статистики, методов оптимизации и исследования операций. Значителен объем подготовки студентов ' +
            'в области информационных технологий и программирования.',
            site: 'http://www.mmf.bsu.by/Default.aspx?tabid=53',
            ball: '285'
        },
        {
            name: 'Математика. Научно-производственная деятельность',
            description: 'Научно-производственное направление готовит математиков со времени основания факультета. ' +
            'Подготовка по специальности «Математика» ведется с изучением как классических математических предметов, ' +
            'так и новейших программно-информационных технологий и сред.',
            site: 'http://www.mmf.bsu.by/Default.aspx?tabid=544',
            ball: '266'
        },
        {
            name: 'Математика. Научно-педагогическая деятельность',
            description: 'После его окончания Вы получаете двойную специальность: «Математик, преподаватель математики и информатики». ' +
            'Если вам нравится, вы делаете акцент на научной деятельности и идете работать как математик, ' +
            'или же вы идете работать программистом (потому что у вас есть способности, хорошее мышление, ' +
            'способность к быстрому обучению, но нет завышенных амбиций – да простят нас выпускники ФПМИ). ' +
            'Без сомнения, вы сможете найти себе работу экономиста или бухгалтера ' +
            '(если захотите, на мехмате есть возможность получить второе экономическое образование, ' +
            'но главное все-таки – сама квалификация «математик»). ' +
            'Программа обучения включает классические математические курсы, такие как: ' +
            'аналитическая геометрия, алгебра и теория чисел, математический анализ, программирование, ' +
            'дифференциальные уравнения, топология, функциональный анализ, методы оптимизации, численные методы и многие другие, ' +
            'а также предметы, связанные непосредственно с педагогической деятельностью: педагогика, психология, ' +
            'методы преподавания математики и др.',
            site: 'http://www.mmf.bsu.by/Default.aspx?tabid=545',
            ball: '245'
        },
        {
            name: 'Механика и математическое моделировани',
            description: 'Механико-математический факультет - единственный в нашей Республике, ' +
            'где осуществляется подготовка механиков-теоретиков с глубокой математической подготовкой.',
            site: 'http://www.mmf.bsu.by/Default.aspx?tabid=142',
            ball: '250'
        }];
   
 
    $scope.editorEnabled = false;   
 
    $scope.enableEditor = function(index) {
        $scope.editorEnabled = true;
        $scope.editableTitle = $scope.specialtys[index].description;
 
    };
    $scope.disableEditor = function(index) {
        $scope.editorEnabled = false;
    };
 
    $scope.save = function(index) {
        $scope.specialtys[index].description = $scope.editableTitle;
        $scope.disableEditor(index);
    };
});


css
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
*{
    margin:0;
    padding:0;
}
body{
    font-family:Verdana, Geneva, sans-serif;
    font-size: 10pt;
    border:1px solid grey;
    background: url(img/bg.feather.middle.png) no-repeat 50% 0%;
}
 
#vse{
    width:1000px;
    margin:0 auto;
}
#header{
    
    height:110px;
    
    background-color: #1f3366;
}
.ng-binding{
    margin-top:20px;
}
#logo{
    width:500px;
    float:left;
    height:110px;
}
#logo img{
    float:left;
}
#logo h1,h2{
    margin-left:93px;
}
#logo h1{
    font-family:Century Gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
    color:white;
    font-size:120%;
    font-weight: normal;
    margin-bottom: -5px;
    margin-top:35px;
}
#logo h2{
    font-family:Century Gothic, Verdana, Geneva, Arial, Helvetica, sans-serif;
    color:white;
    font-size:100%;
    font-weight: normal;
}
#logo_foto{
    height:110px;
    margin-left: 700px;
    background-image: url(img/bg.feather.top.gif);
    background-repeat: no-repeat;
}
#language{
    position:relative;
    left:205px;
}
#language img{
    float:left;
    position:relative;
    top:3px;
}
#language p{
    margin-left:20px;
    color:white;
}
#language a{
    text-decoration: none;
}
#language a:hover{
    color: white;
    text-decoration: underline;
}
#menu{
    height:40px;
    background:url(img/bg.menu.red.png) bottom left repeat-x transparent;
}
#menu table{
    padding:5px;
    font-size: 110%;
}
 
#palka{
    font-size: 20px;
    font-weight: normal;
}
#menu a{
    text-decoration: none;
    color:white;
}
#nav{
    padding-top:5px;
 
}
#content{
    
    background-color: transparent;
    height:348px;
    
}
#filter{
    width:75%;
    float: right;
    font-size: 10px;
}
#filter input{
    height:10px;
    font-size: 10px
}
#v_contente{
width:100%;
}
#content a{
    color:black;
    text-decoration: none;
    padding-bottom: 30px;
}
#next a{
    color:blue;
}
 
#left_span{
    padding-left:3px;
    float: left;
    width:31%;
    height:306px;
    margin-top:20px;
}
#content table{
width:100%;
border-style:double;
padding-bottom: 45px;
}
 
#content tr{
    display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
 
 #content hr{  
    width: 98%;
    border-width: 0px;
    border-top: 1px solid #9FC9EB;
    padding: 0 0 0px 0;}
 
#abityrient{
    color: #D56224;
    font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin:0 0 0 15px; 
 
}
 
.spisok{
    list-style:url(img/1212.jpg);
    color:#555;
    margin-top:10px;
}
.spisok li{
    margin:0 5px 15px 8px;
    font-size: 11px;
}
.spisok  a{
    color:#555;
}
#content  a:hover, li:hover{
    color:#D56224;
    list-style:url(img/2323.jpg);
}
 
/*#content li a:visited{
    color:gray;
}*/
#description{
    color:black;
    font-size: 11px;
    width:90%;
}
#iconca_abtyr{
    margin-right:8px;
}
.main{
    padding-left:25px;
}
#right{
    width:68%;
    float:right;margin-top:20px;
}
#footer{
    clear:both;
    height:153px;
    background-color: #1f3366;
    margin-top:10px;
    color:white;
    font: 85% Georgia, Verdana, Arial, Helvetica, sans-serif;
}
#footer a{
    color:white;
}
#footer a:hover{
    color:red;
}
#footer_text{
    width:58%;
    margin-left:70px;
    padding-top:5px;
}
#footer_text p{
    padding-top:10px; 
}
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.06.2015, 17:55
Ответы с готовыми решениями:

Вывод ошибок undefined index, если не найдена переменная в глоб. массивах session, post, get
Подскажите, я писал php на денвере, а после пересел на обычную вручную...

Три файла,(index.coo, index.doc, index.lex) а что за БД не знаю
Мне дали файловую БД(о-очень много файлов) и три файла: index.coo, index.doc и...

Stringgrid, редактирование новой строки и ошибка "list index out of bounds"
stringgrid1.RowCount:=stringgrid1.RowCount+1; Добавляется пустая строка. При...

ListBox изменить цвет текста у Item[index]
Как изменить цвет у определённых ячеек ListBox ? Для перерисовки использую...

Индексация и санкции текста спрятанного правилом z-index
Добрый день, есть вопрос к гуру. Скажем есть шаблон &lt;div&gt; Контент для...

2
JokerNN
134 / 130 / 57
Регистрация: 29.12.2011
Сообщений: 359
03.06.2015, 11:00 2
ng-repeat создаёт новый scope, который наследуется от парента,
поэтому ваш ng-model в textarea привязывается не к той переменной, поменяйте
HTML5
1
ng-model="editableTitle"
на
HTML5
1
ng-model="$parent.editableTitle"
И всё должно заработать. Ну или другой вариант - передавать значение едитора в функцию save
1
azotklas
0 / 0 / 1
Регистрация: 16.09.2014
Сообщений: 26
03.06.2015, 20:20  [ТС] 3
а как решить такую проблему!?
мы нажимаем на специальность, она раскрывается. нажимаем на редактирование, она забивается в textarea/
как сделать так что бы этот текст ареа не переходил на другие специальности.
или может как сделать так что бы при нажатии на редактировать, текст забивался в текстареа. а потом когда я нажимаю открыть другую специальность, мой текстареа закрывался(обрывалось редактирование)
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.06.2015, 20:20

Редактирование Текста
Здраствуйте Пытался заменить все комбинации shift+0, shift+1, и.т.д. Вот код ...

редактирование текста
Дан текст, в котором после знаков препинания могут отсутствовать пробелы....

редактирование текста
if(Textbox1.font.Bold = false) { TextBox1.Font.Bold = true; } else {...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru